如何让元素在网页中居中,CSS是元素居中的方法总结

日期:2018-03-26 12:57:56 类别:  Javascript

CSS一般都是前端工程师的事情,但是其他职位多少得懂一点。

让元素居中这个需求,是非常常见的。

最容易看到的就是文字居中了,使用text-align

text-align:center

我在网站找了下资料,总结出了让元素居中的集中方法,有要用的mark

1、内联元素水平居中

就是上面说的text-align:center.这种方式只对

内联元素inline、内联块inline-block、内联表inline-table、inline-flex元素水平居中有效
.center-text {
    text-align: center;
 }

2、块级元素居中。

将margin-left、margin-right设置为auto

.center-block {
  margin: 0 auto;
}

3、多块级元素 水平居中

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

4、利用display:flex

可能对于display:flex有人很少见,大部分都是display:block或者display:none。

弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式
.flex-center {
    display: flex;
    justify-content: center;
}