关于css绝对居中的问题
二筒 发布于 1477636624

新手求指导,看下面的代码,要让box2局中于box1应该怎么写呢?

 

.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: 20px auto;
}

 

我按照上面的代码写了,可是只能水平居中,那要垂直居中应该怎么写?

w3cschool 发布于 1477638105

可以试试 Flexbox

.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
display:flex;
align-items: center;
justify-content: center;
}

.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}

 

<div class="box1">
<div class="box2">
</div>
</div>