css垂直居中总结

前言

　　垂直居中布局的一些总结心得，初学者可以拿来即用。

　　元素分类已经在《css水平居中总结》中总结过，这里就不多赘述了。

 

一、行内元素垂直居中

在行级元素中使用如下方式进行垂直居中：

height: 300px;

line-height: 300px;

 

二、块级元素垂直居中

1.元素固定高度，计算margin-top＝（父元素高－子元素高）/ 2，即可设置垂直居中。

.father{
　　width: 500px;
　　height: 300px;
　　border: 1px solid #ccc;
}
.child{
　　width: 100px;
　　height: 100px;
　　border: 1px solid #000;
　　margin-top: 100px;   /*此方法不适用于行内元素，需要变为块状元素或内联块状元素*/
}

 

 

三、所有元素垂直居中

1.直接在外层套一层table进行垂直居中，简单方便快捷，此方法适用于所有元素。缺点是多了一些无语义标签。

<table>
　　<tbody>
　　　　<tr>
　　　　　　<td>
　　　　　　　　<div>
　　　　　　　　　　 我想垂直居中！
　　　　　　　　</div>
　　　　　　</td>
　　　　</tr>
　　</tbody>
</table>

 

2.使用css3的flexbox进行垂直居中，要在父元素中写入display: flex和align-items:center，此方法适用于所有元素，但是存在IE不兼容的情况，PC页面慎用。

.father{
　　width: 960px;
　　height: 300px;
　　background: yellow;
　　display: flex;
　　display: －webkit-flex;
　　align-items:center;
　　-webkit-align-items: center;
}

 

3.同样使用flexbox进行垂直居中，元素高度不确定，在父元素中加入下方代码区域红字标注的内容即可。此方法适用于所有元素。

.father{
　　width: 500px;
　　height: 500px;
　　border: 1px solid #ccc;
　　display: flex;
　　display: -webkit-flex;
　　flex-direction: column;
　　-webkit-flex-direction: column;
　　justify-content: center;
}
.child{
　　width: 100px;
　　border: 1px solid #000;
}

 

4.要居中的元素高度不定，使其父元素固定高度和宽度，并在父元素中添加display: table-cell和vertical-align: middle即可居中，此方法适用于所有元素。

.father{
　　width: 500px;
　　height: 100px;
　　display: table-cell;
　　vertical-align: middle;
　　border: 1px solid #ccc;
}
.child{
　　width: 200px;
　　border: 1px solid #000;
}

 

5.元素固定高度，使用定位方法来居中，父元素设置position: relative，子元素position: absolute、top: 50%、margin-top: -150px，此方法适用于所有元素。

.father{
　　width: 500px;
　　height: 500px;
　　border: 1px solid #ccc;
　　position: relative;
}
.child{
　　width: 100px;
　　height: 300px;
　　border: 1px solid #000;
　　position: absolute;
　　top: 50%;
　　margin-top: -150px;　　/*margin-top＝ - 子元素高/ 2*/
}

 

内容持续更新中...

如有错误的地方或者更好用的方法，希望大家能在评论区留言指正，让我们共同进步！