CSS 的几种居中

这里介绍一下关于水平垂直居中的几种方式。

水平居中

1. 行内元素

1
text-align: center;

2. 块级元素

1
margin: 0 auto; /* or  margin: auto; */

使用前提:width 必须设值,不然元素会被拉伸至父元素的宽度,即 auto 为 0, width 为父元素的 width;

强行解释一下为什么这里 margin 设置成 auto 时会成功:

首先,关键字 auto 默认是使用剩余空间。其次,因为在 html 中,元素 的 width 值是能一开始就确定下来的,依赖于其包含的块,所以其计算方式为:

1
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

在这里,因为 width 的值必须存在,所以即使 paddingborder 的值 为 0,那么父元素的剩余空间就是 父元素的宽度 - 本身的 width,又因为 margin-left 等于 margin-right 等于 auto,即这两者会均分父元素剩余空间的宽度,那么元素就会变成居中的样子了。

但是 height 是依赖于元素自身包含的内容的高度,无法再一开始就确定下来,auto 没有参照物,所以无法按照上述的来计算,margin-topmargin-bottom 设置为 auto 的话,其值默认为 0;

3. 使用 flex (通用)

父元素:

1
2
display: flex;
justify-content: space-around;

垂直居中

1. 使用 position

如果子元素的高度已知,我们可以不使用 transform,使用 margin-top: -self_half_height(即减去子元素的高的一半)即可。如果子元素的高度未知的话,就只能这样使用了。

子元素:

1
2
3
position: relative;     
top: 50%;
transform: translateY(-50%);

此方法较为通用,但是有些时候你不能使用对有些元素使用 position 的时候就不适用了;

2. 使用 flex (推荐)

使用 aligin-items

父元素:

1
2
display: flex;
align-items: center;

使用 margin

这里是因为在 flexbox 布局中,当父元素被设置为 flex 后,margin: auto 会将元素的在水平和垂直方向均设置为居中。

父元素:

1
display: flex;

子元素:

1
margin: auto 0;

水平/垂直居中

1. 使用 position

其实这个方法就是上文的垂直居中再加上一个水平的而已。

子元素:

1
2
3
4
position: relative;     
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

2. 使用 flex + margin

父元素:

1
display: flex;

子元素:

1
margin: auto;

3. 使用 flex

这里强行使用了 justify-contentspace-around 的样式来完成水平居中

1
2
3
display: flex;
justify-content: space-around;
align-items: center;
文章目录
  1. 水平居中
    1. 1. 行内元素
    2. 2. 块级元素
    3. 3. 使用 flex (通用)
  2. 垂直居中
    1. 1. 使用 position
    2. 2. 使用 flex (推荐)
      1. 使用 aligin-items
      2. 使用 margin
  3. 水平/垂直居中
    1. 1. 使用 position
    2. 2. 使用 flex + margin
    3. 3. 使用 flex
|