以下列举三种使元素水平垂直居中方法
一、利用vertical-align,text-align,inline-block实现
html:
//html
<div class="p">
<div class="c">
水平垂直居中
</div>
</div>css:
效果如下：
二、用在移动端 ie11 chrome：利用flex实现
html：
<div class="p1">
<div class="c1">
水平垂直居中
</div>
</div>css:
效果如下：
三、利用绝对定位实现
html:
<div class="p2">
<div class="c2">
水平垂直居中
</div>
</div>css：
效果如下：
.p2 {
position: relative;
width: 200px;
height: 80px;
background: orange;
}
.c2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px;
margin-top: -15px;
/*用在移动端*/
/*transform: translate(-50%,-50%);*/
width: 160px;
height: 30px;
background: #EFEFF4;
}