CSS中利用利用flex实现水平垂直居中
基本结构样式:
.box {
width: 400px;
height: 400px;
background-color: red;
}
.inner {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="box">
<div class="inner"></div>
</div>
1.利用flex布局
将父元素启动flex布局,并设置justify-content: center; align-items: center;。
添加样式:
.box {
display: flex;
justify-content: center;
align-items: center;
}
2.利用flex+margin
父元素设置display: flex;,子元素设置margin: auto;。
添加样式:
.box { display: flex; }
.inner { margin: auto; }
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64648.shtml