[TOC]
1. 垂直水平居中
1.1 高度固定，
<style>
.location { height: 360px; width: 100%; border: 1px solid; text-align: center; }
.location::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.location .center {
display: inline-block;
vertical-align: middle;
}
.location .word-zh {
font-size: 32px;
}
.location .word-en {
font-size: 24px;
}
</style>
<div class="location">
<div class="center">
<div class="word-zh">你好</div>
<div class="word-en">哈哈</div>
</div>
</div>
垂直居中
2018-01-21直播
居中vs不居中
绝对定位实现居中
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
/*yi*/
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
/*er*/
.dialog {
position: absolute;
left: calc(50% - 200px);
top: calc(50% - 150px);
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
应用场景
vertical-align实现居中
vertical-align: middle; 只对行内元素和表格元素生效。
<div class="box">
<div class="test">asd</div>
</div>
css
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box .test{
vertical-align: middle;
display: inline-block;
background: blue;
}