CSS-Tricks(三)：垂直居中的四种方法
2017-08-08 本文已影响37人
李悦之
1. display:table; 和 display:table-cell;实现动态垂直居中
思路：父级元素使用display:table；需要垂直居中的元素使用display:table-cell;并配合使用vertical-align:center;
<style>
.parent{
display:table;
vertical-align:middle; //这里vertical-align可以不写；
width:200px;
height:200px;
border:1px solid red;
}
.child{
display:table-cell;
vertical-align:middle; //这里的vertical-align:middle;一定要写
text-align:center;
border:1px solid blue;
}
</style>
</head>
<body>
<div class=parent>
<div class=child>
<div>我是一行文字</div>
<div>我是另一行文字</div>
我是另一行文字
</div>
</div>
</body>
2. 仅仅使用display:table-cell;来实现垂直居中，它和上面的方法有细微的差别
和上面的差异：这里父级和子级需要垂直居中的元素都必须添加verical-align:center;而上面那种方法父级是不需要添加vertical-align:center;的。第二个差别在于，当父级使用display:table;同时子级也使用display:table-cell;时，子级元素会占满父级的高度。
<style>
.parent{
display:table-cell;
vertical-align:middle;
width:300px;
height:300px;
border:1px solid red;
}
.children{
text-align:center;
vertical-align:middle;
border:1px solid blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
我是儿子我是女儿我是儿子我是女儿我是儿子我是女儿
</div>
</div>
</body>
推荐张鑫旭的两篇文章：
我所知道的几种display:table-cell;应用
大小不固定的图片和多行文字的垂直水平居中
当然，display:table-cell;不仅可以用来做垂直居中，也可以用来做两栏自适应布局。看张鑫旭的文章。
demo在这里，两栏布局，没用自适应
3.使用position加transform来实现垂直居中
这种方法很常见
<style>
.parent{
width:300px;
height:300px;
border:1px solid red;
}
.child{
position:relative;
top:50%;
transform:translateY(-50%);
text-align:center;
border:1px solid blue;
}
</style>
4. 使用flex，这个最省事
display:flex;
align-items:center;
