Flexbox弹性布局是俺非常喜欢的页面元素居中对齐方式。
我们可以申明一个容器元素,并设置容器元素display:flex; justify-content:center,这样容器元素中的子元素就会水平居中显示了。
<!--HTML-->
<div class="wrapper">
...
</div>
.wrapper {
display: flex;
justify-content: center;
}
在element-ui 框架中也有类似的设置水平居中方式,例如:
<el-row type="flex" justify="center">
</el-row>
其他的ui框架也有类似的设置方式。