1.绝对定位居中
.box1{
position:relative;border:1px solid #000000;
/* 自定义高度*/
width:500px; height:500px;
}
.box2{
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
border:1px solid #00aef3;
width:200px;height:200px;
}
效果图:
图一
注意:当没有指定内容块的具体的高度和宽度时,内容块会填满剩余空间。可以通过 display:table 来使高度由内容来决定,但是浏览器支持不是很好。
2.transform:translate();加一半减一半居中
.box{
width: 500px;
height: 500px;
border: 1px solid red;
}
.box1{
position: relative;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
border: 1px solid #222222;
}
这里translate的百分比是相对于自身的,所以高度是可变的,效果如图一。但是transform需要进行适配浏览器得支持。
3.跟上面相似,可以自己理解一下子
.box{
width: 500px;
height: 500px;
border: 1px solid red;
}
.box1{
position: relative;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
border: 1px solid #222222;
}
注意:需要知道宽高
4.弹性盒子flex 居中
.box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
border: 1px solid red;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid #222222;
}
最方便最简单,代码最少得,需要浏览器得支持