css垂直居中
行内元素(table-cell)
利用table-cell与verticle-align进行配合实现该效果
<div class="box">
<span class="content">
2312
</span>
</div>
css部分如下
.box{
width: 300px;
height: 300px;
background: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
color:#fff;
}
.content{
vertical-align: middle;
}
行内元素（flex）
<div class="box">
<span class="content">我在盒子的中间呢</span>
</div>
.box{
width: 300px;
height: 300px;
background: #000;
display: flex;
align-items: center;
color: #fff;
justify-content: center;
}
块级元素
以下各方法html部分如下
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
定位和需要定位的元素的margin减去宽高的一半
.box{
width: 300px;
height: 300px;
background: #000;
position: absolute;
left: 50%;
top:50%;
margin: -150px 0 0 -150px;
}
.content{
width: 200px;
height: 200px;
background: #23AAF2;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
定位和margin:auto;
.box{
width: 300px;
height: 300px;
background: #000;
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
margin: auto;
}
.content{
width: 200px;
height: 200px;
background: #23AAF2;
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
margin: auto;
}
绝对定位和transfrom
.box{
width: 300px;
height: 300px;
background: #000;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
.content{
width: 200px;
height: 200px;
background: #23AAF2;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
