CSS3实现垂直居中
发布时间：2018-01-06, 17:01:31 分类：HTML | 编辑 off 网址 | 辅助
正文 893字数 323,943阅读
<style>
.c{
/*需要水平垂直居中的元素css*/
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
}
.pr{
/*父级元素css 单行居中*/
display : flex;
justify-content : center;
align-items : center;
}
.prm{
/*父级元素css 多行垂直居中*/
display : flex;
justify-content : center;
flex-wrap : wrap/wrap-reverse;
align-items : center;
}
</style>
<div class="pr" style="display:none">
<p class="c">单行居中 单行居中</p>
</div>
<div class="prm">
<p class="c">
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
多行垂直居中 多行垂直居中 多行垂直居中
</p>
</div>Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 2 条评论 »
<style> .prm { width:300px; height:300px; background:green; display:table-cell; text-align:center; vertical-align:middle; } </style> <div class="pr" style="display:none"> <p class="c">单行居中 单行居中</p> </div> <div class="prm"> <p class="c"> 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 多行垂直居中 </p> </div><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>垂直居中Demo</title> <style> #container{ height:300px; background:#d6d6d6; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content:center; align-items: center; } #center{ width:100px; height:100px; background-color:#666; color:#fff; font-weight:bold; font-size:18px; display:flex; /*这个写在这只是为了#center这几个字的垂直居中*/ justify-content:center; align-items: center; } </style> </head> <body> <div id='container'> <div id = 'center'>#center</div> </div> </body> </html>