元素垂直居中的各种方法

元素垂直居中的各种方法

html内容:

<div class="app">
	<div class="block"></div>
</div>

所有方式的结果都如下：

1. 绝对定位

通过与父元素的绝对定位来让自身实现垂直居中。

.app {
	width: 500px;
	height: 500px;
	background: red;
	position: relative;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
	position: absolute;
	top: 30%;
}

优点：简单，方便，可以在浏览器控制台直接调好数据
缺点：不精确，肉眼看到的居中;当父元素是百分比长宽的时候，容易布局错乱，不再居中，需要根据不同的情形设置不同的百分比

2. 相对定位

通过与父元素相对的位置来让自身实现垂直居中。

.app {
	width: 500px;
	height: 500px;
	background: red;
	position: relative;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;/*仅此一点不一样*/
	top: 30%;
}

相对定位跟绝对定位看起来代码基本差不多，只是position的区别，但是绝对定位是脱离了文档流的，而相对定位不会，具体区别请自行查阅相关信息。

优点和缺点也很明显，相对定位的优点缺点包含了和绝对定位的优缺点，但是其缺点有因为没有脱离文档而进行的位置改变对其他元素的影响。在计算top的时候必须要将其他在父元素容器内且未脱离文档流的元素考虑进去

3. css3属性vertical-align

css3新特性，仅能作用在display为table或者table-cell上,让容器内元素垂直居中，而不是通过设置内部元素自己的样式属性。

.app {
	width: 500px;
	height: 500px;
	background: red;
	display: table-cell;
	vertical-align: middle;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
}

优点：可以实现自适应，即使父容器高度改变，也可自行居中
缺点：父容器display必须为table或者table-cell，大多时候不是很方便

4. absolute+translate

主要是通过translate平移，当内部元素左上角距离父容器左上角的距离是父容器宽度的50%的时候，只要子容器在向左上角平移自身宽高的百分之50%，即可实现居中对齐，且是垂直水平居中，可根据需要自行设置垂直或者水平居中。

.app {
	width: 500px;
	height: 500px;
	background: red;
	position: relative;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

优点：可以完全实现响应式，并且不会因父容器内其他元素的改变产生影响
缺点：暂时没找到。。。非要说的话就是兼容性，IE9以下不兼容(吐槽一句：IE9以下版本的都是毒瘤)

5. relative+translate

原理跟absolute+translate类似，只是使用了relative不会脱离文档流。

.app {
	width: 500px;
	height: 500px;
	background: red;
	position: relative;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
}

优点：跟absolute+translate一样
缺点：父容器内部如果含有其他未脱离文档流的元素，那么布局就不会是居中的，即仅限于父容器内只有自己一个元素或者其他元素都脱离了文档流的情况

6. absolute+margin

让元素脱离文档流，然后距离上下都是0之后，设置margin的值为auto会自动撑开元素，让元素垂直居中。

.app {
	width: 500px;
	height: 500px;
	background: red;
	position: relative;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
	position: absolute;
	bottom: 0;
	top: 0;
	margin: auto;
}

优点：响应式
缺点：暂时没有发现。。。

7.padding

设置父容器的padding，这种方法不支持响应式，它必须知道父容器及内部元素的宽高才可以设置。

8.flex布局

史上最强大。。。兼容性最好的响应式布局了，利用得当可以实现各种布局，所以垂直居中也不在话下。有兴趣可以看看阮一峰的教程,具体属性什么的就不详细介绍了，他的博客里都有。

.app {
	width: 500px;
	height: 500px;
	background: red;
	display: flex;
	align-items: center;
}
.block {
	width: 200px;
	height: 200px;
	background: blue;
}

总结：上面就是常见的一些实现垂直居中的方法，当然肯定不会只有这些。这个博客一方面是为了让自己回顾布局的知识，另一方面就是为了面试，其中flex布局以及通过定位布局是必须掌握的，对于响应式来说有很大的用处。水平居中可以用上面的类似原理，因为原理基本一样，所以不单独抽出来作为一篇内容了，有什么问题欢迎指正。