1. 犀牛前端部落首页
  2. CSS百科

flexbox居中对齐

flexbox居中对齐

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框架也有类似的设置方式。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3097.html

发表评论

登录后才能评论