div内容垂直居中
作者:陆金龙
发表时间:2017-09-23 17:21
1.嵌套div可使用Flexbox布局
在父元素上设置display: flex;和align-items: center;属性,子元素就可以在父元素中上下居中。
align-items:center适用于所有使用了flex布局的容器。当一个容器元素设置了display:flex,align-items:center将会把容器内所有项目在垂直方向上居中对齐。
2.单行内容可以设置height和line-height相同:
div { height:30px; line-height:30px; width:100px; overflow:hidden; }
3.多行内容使用css3的transform属性
.center-vertical{ position: relative; top:50%; transform:translateY(-50%); }
transform在嵌套中可能50%取值为非预期,而导致不居中。
4.display:table布局
多行内容使用display:table 将子元素设置为display:table-cell 和vertical-align:middle
.wrapper{ display: table; }
.cell { display: table-cell; vertical-align: middle; }
html结构如下:
<div class="wrapper"> <div class="cell"> <div class="title-text">第一行内容</div> <div class="text-sm">第二行内容</div> </div> </div>