html盒子模型 居中,css实现盒子模型的各种居中方式

复制代码

1.绝对定位 margin负值

.parent{

width:600px;

height:600px;

margin:auto;

position: relative;

background-color: #000;

}

.child{

width:200px;

height:200px;

background-color: red;

position: absolute;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

复制代码

2.绝对定位 四个方位为0

.parent{

width:600px;

height:600px;

margin:auto;

position: relative;

background-color: #000;

}

.child{

width:200px;

height:200px;

background-color: red;

position: absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

}

复制代码

3.绝对定位 translate

.parent{

width:600px;

height:600px;

margin:auto;

position: relative;

background-color: #000;

}

.child{

width:200px;

height:200px;

background-color: red;

position: absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%)

}

复制代码

4.margin属性居中

.parent{

width:600px;

height:600px;

margin:auto;

overflow: hidden;

background-color: #000;

}

.child{

width:200px;

height:200px;

background-color: red;

margin: 150px auto 0;

}

复制代码

5.table-cell

.parent{

width:600px;

height:600px;

background-color: #000;

display: table-cell;

vertical-align: middle;

}

.child{

width:200px;

height:200px;

background-color: red;

margin: 0 auto;

}

复制代码

6.flex 居中

.parent{

width:600px;

height:600px;

display: flex;

justify-content: center;

align-items: center;

background-color: #000;

margin:0 auto;

}

.child{

width:200px;

height:200px;

background-color: red;

}

复制代码

总结了下用6种方法实现盒子居中的方式。纯当个人积累了^.^