[英]How do I center div horizontally and vertically within a div using flexbox?
In a flexbox, setting margin
to auto
will set the margin automatically for both the horizontal and vertical axis. 在flexbox中,将margin
设置为auto
会自动为水平和垂直轴设置margin。
HTML 的HTML
<div class="parent">
<div class="child">
</div>
</div>
CSS 的CSS
html, body {width:100%;height:100%;}
.parent {
display: flex;
width: 100%;
height: 100%;
border: 5px solid red;
}
.child {
width: 100px;
height: 100px;
margin: auto; /* Auto margin for both horizontal and vertical axis */
border: 5px solid blue;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.