布局解决方案

发表于   |   分类于   |  

今天来总结一下页面架构中的布局解决方案的基础知识

一、居中布局

垂直居中

1.inline-block + text-align:center

这个方法是通过设置子元素的display属性为inline-block，父元素的text-align:center来实现的，我们都知道这样设置会让子元素的宽度为其内容的宽度，然后设置父元素字体居中就可以达到居中的目的。缺点是inline-block的兼容性问题，还有就是额外的代码来修复text-align:center带来的问题，因为子元素的内容也会继承父元素的居中属性，有时候我门额可能并不想子元素里的内容也居中。

1
2
3
4
5
6
7
8
9
<div class="parent">
	<div class="child"></div>
</div>
.parent{
	text-align:center;
}
.child{
	display:inline-block;
}

2. table + margin

也是兼容性强问题。。。。ie6，ie7

1
2
3
4
5
6
7
<div class="parent">
	<div class="child"></div>
</div>
.child{
	display:table;
	margin:0 auto
}

3.absolute + transform

还是兼容性问题，大家都知道，transform属性低版本浏览器也不支持,高版本浏览器也需要加一些私有的前缀

1
2
3
4
5
6
7
8
.parent{
	position:relative
}
.child{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}

4.flex + justify-content

flex在ie6/7/8低版本浏览器中不支持

1
2
3
4
.parent{
	display:flex;
	justify-content:center;
}

垂直居中

1.tabel-cell + verticla-align

兼容性还好，可以兼容到ie8，但是ie6/7无法兼容

1
2
3
4
.parent{
	display:table-cell;
	vertical-align:middle;
}

2.absolute + transform

1
2
3
4
5
6
7
8
.parent{
	position:relative
}
.child{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

3.flex + align-items

1
2
3
4
.parent{
	display:flex;
	align-items:center;
}

居中

既要水平居中，也要垂直居中

1.综合之前的水平居中和垂直居中

2.absolute + transform

1
2
3
4
5
6
7
8
9
10
.parent{
	display:flex;
	align-items:center;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

3.flex + justify-content + align-items

1
2
3
4
5
.parent{
	display:flex;
	justify-content:center;
	align-items:center;
}