css垂直居中
类别:Web前端 浏览量:816
时间:2015-4-25 css垂直居中
css垂直居中方式一、绝对定位
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方式二、table-cell
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方式三、绝对定位和负边距
.box3{position:relative;}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方式四、display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
方式五、line-height
将line-height设置为与li的高度相同就可以居中
<style type="text/css">
.con_li{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff;
line-height:300px;
}
</style>
<li class="con_li">
测试内容ddddddddddd
</li>
方式六、CSS3中的Flexbox
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
标签:css居中
您可能感兴趣