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

<div class="parent">
    <div class="child"></div>
</div>
复制代码

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种方法实现盒子居中的方式。纯当个人积累了^.^

转载于:https://juejin.im/post/5beabd80f265da613b6f5317