Flexbox居中
使用flexbox在父元素中水平和垂直居中子元素。
- 使用
display: flex
创建一个flexbox布局。 - 使用
justify-content: center
将子元素水平居中。 - 使用
align-items: center
将子元素垂直居中。
<div class="flexbox-centering">
<div>居中内容。</div>
</div>
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}