经常在项目中用到,今天总结了一下:
以下两个类为公共类,便于更好的显示效果,非核心代码
.common{
width: 600px;height: 180px;
background-color:#56abe4;
color: #fff;
margin: 15px auto;
border-radius: 3px;
}
.con{
display: inline-block;
padding: 15px;
width: 160px;
height: 80px;
background-color: orange;
}
正文部分:
第一种方法:
/*position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;*/
HTML结构:
<div class="common block1">
<div class="inner1 con">
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
</div>
</div>
CSS部分:
.block1{
position: relative;
}
.inner1{
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
第二种方法:
/*display: table-cell*/
HTML结构:
<div class="common block2">
<div class="con">
display: table-cell;
text-align: center;
vertical-align: middle;
</div>
</div>
CSS部分:
.block2{
display: table-cell;
text-align: center;
vertical-align: middle;
}
第三种方法:
/*display: flex;*/
HTML结构:
<div class="common block3">
<div class="con">
display: flex;
align-items: center;
justify-content: center;
</div>
</div>
CSS部分:
.block3{
display: flex;
align-items: center;
justify-content: center;
}
第四种方法:
/*负定位*/
HTML结构:
<div class="common block4">
<div class="inner4 con">
position: absolute;
top: 50%;
left: 50%;
并利用负定位消除元素的上下,左右偏移
</div>
</div>
CSS部分:
.block4{
position: relative;
}
.inner4{
position: absolute;
top: 50%;
left: 50%;
margin-top: -55px;/*80/2+15=55*/
margin-left: -95px;/*160/2+15=95*/
}
第五种方法:
/*transform*/
HTML结构:
<div class="common block5">
<div class="inner5 con">
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
</div>
</div>
CSS部分:
.block5{
position: relative;
}
.inner5{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
word-wrap: break-word;
}
第六种方法:(兼容性较好)
/*行内块*/
HTML结构:
<div class="common block6">
<div class="inner6 con">行内块:<br/>谨记span标签与该div之间是没有空白的,否则会产生误差</div><span></span>
</div>
CSS部分:
.block6{ text-align:center;}
.inner6,.block6 span{
display:inline-block;
*display:inline;
zoom:1;
vertical-align:middle;
}
.inner6{max-width:100%;max-height:100%;}
.block6 span{width:0;height:100%;}
以上几种方案存在兼容性问题,在使用时请先查询核心css的浏览器兼容情况,查询地址:http://caniuse.com/
以上。
欢迎补充~