定位
.div1{
/*优点:所有浏览器支持*/
/*缺点:固定宽高,灵活性不好*/
/*法一*/
/*position: absolute;*/
/*法二*/
position: fixed;
top:50%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -50px;
margin-top:-50px;
background-color: #f00;
}
.div2{
/*IE6,IE7不支持*/
/*优点:宽高可以任意变化*/
/*法三*/
/*position: absolute;*/
/*法四*/
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 140px;
height: 140px;
}
display:table-cell
.div3{
display: table-cell;
vertical-align: middle;
/*width: 900px;*/
/*height: 200px;*/
text-align: center;
/*margin: auto;*/
background-color: #f00;
/*float: left;*/
/*出现浮动就不能用*/
/*只能实现行内、行内块元素居中,只是水平不能居中,行内还是可以的,可以在内部块级元素设置margin:auto实现水平居中*/
/*IE7不支持*/
/*div3高度确定table-cell,div3高度不确定外层套一层设置display:table*/
}
.div3 img{
width: 40px;
background-color: #0f0;
}
.outer-table{
display: table;
width: 100%;
height: 100%;
}
针对行内、行内块元素
/*第六种针对行内、行内块元素*/
.div7{
height: 198px;
line-height: 198px;
text-align: center;
background-color: #f00;
}
.div7 img{
width: 10%;
display: inline;
}
css3(IE9以下不支持*)
/*第七种 IE9以下不支持*/
.div8{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 190px;
background-color: #f00;
}
.innerbox{
width: 70px;
height: 80px;
background-color: #0f0;
}
/*第八种 IE9以下不支持*/
.div9{
width: 100px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #f00;
}
使用dispaly:inline-block 和 vertical-align 还有伪类实现
只有inline-block,inline还有table的东西能用vertical-align这个属性
/*第9种---最好的--以参考线为基准*/
/*使用dispaly:inline-block 和 vertical-align 还有伪类实现*/
.div10{
height: 500px;
text-align: center;
background-color: #f00;
}
.div10:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
background-color: #000;
}
.inner10{
display: inline-block;
width: 100px;
vertical-align: middle;
background-color: #0f0;
}
html结构
<div class="div10">
<div class="inner10">cwq</div>
</div>