添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
阳刚的甜瓜  ·  访谈 | 智谷趋势为何受到国际主流媒体关注·  4 月前    · 
气势凌人的跑步机  ·  投资印度，恰逢其时？ | 摩根大通私人银行亚洲·  5 月前    · 
冷冷的松鼠  ·  跨越2000公里的24年扶贫路--党建-人民网·  8 月前    · 
深情的鞭炮  ·  提高综艺节目跨界主持质效的思考 - 军事记者·  8 月前    · 
酒量小的登山鞋  ·  如何使用VBA循环多个数组并显示值？·  1 年前    · 
link管理  ›  CSS 拷问：水平垂直居中方法你会几种？ | Liuyib's Blog
垂直居中 margin text-align inline-block
https://liuyib.github.io/2020/04/07/css-h-and-v-center/
想发财的茴香
1 年前

CSS 拷问：水平垂直居中方法你会几种？

发表于 2020-04-07 更新于 2023-03-06 字数统计 2.5k 阅读时长 17分 阅读次数

CSS 实现水平垂直居中，这是一道经典的面试题，也是我们平时开发经常遇见的问题。本文总结了常用的方法，以及各种奇淫巧技，并且会注明每种方法的兼容性。

开始正文之前，我们准备一些元素： 

1
2
3
 
<div class="outer">
  <div class="inner">hello world</div>
</div>

为了便于查看，加上一些样式： 

1
2
3
4
5
6
7
8
9
10
11
 
.outer {
  width: 300px;
  height: 300px;
  border: 1px solid #999;
}

.inner {
  width: 100px;
  height: 100px;
  border: 1px solid #999;
}

上面这些代码会在下文中复用，并且不再提及，请注意记忆。

水平垂直居中

下面是水平和垂直居中都适用的方法：

  • Flex 方案
  • Grid 方案
  • absolute + transform
  • absolute + calc
  • absolute + 负 margin
  • absolute + margin: auto
  • writing-mode
    • Flex 方案 
    1
    2
    3
    4
    5
    6
    7
    		 
    /* 这里引用复用代码 */

    .outer {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }

    该方案的另一种用法： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    /* 这里引用复用代码 */

    .outer {
      display: flex;
    }

    .inner {
      margin: auto;
    }

    目前在移动端已经完全可以使用 Flex 布局了，PC 端需要看自己业务的兼容性情况。

    优点：不需要固定居中元素的宽高。

  • IE 10+, Chrome 4+, Firefox 2+
  • Android 2.3+, iOS 6+
    • Grid 方案 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    /* 这里引用复用代码 */

    .outer {
      display: grid;
    }

    .inner {
      justify-self: center; /* 水平居中 */
      align-self: center; /* 垂直居中 */
    }

    该方案的另一种使用方法： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    /* 这里引用复用代码 */

    .outer {
      display: grid;
    }

    .inner {
      margin: auto;
    }

    该方案的兼容性比 Flex 差一点，同样的根据自己业务的兼容情况选择使用。

    优点：不需要固定居中元素的宽高。

  • IE 10+, Chrome 57+, Firefox 52+
  • Android 6+, iOS 10.3+
    • absolute + transform

    CSS3 中新增的 transform ，其 translate 属性是根据元素自身计算的。例如：设置 transform: translateX(-50%); ，元素会向左偏移自身宽度的一半。根据这一特性，很容易实现元素的居中： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 
    /* 这里引用复用代码 */

    .outer {
      position: relative;
    }

    .inner {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    优点：不需要固定居中元素的宽高。

  • IE 9+, Chrome 4+, Firefox 3.5+
  • Android 3+, iOS 6+
    • absolute + calc 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    /* 这里引用复用代码 */

    .outer {
      position: relative;
    }

    .inner {
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
    }

    缺点：需要固定居中元素的宽高。

  • IE 9+, Chrome 19+, Firefox 4+
  • Android 4.4+, iOS 6+
    • absolute + 负 margin 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    /* 这里引用复用代码 */

    .outer {
      position: relative;
    }

    .inner {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

    缺点：需要固定居中元素的宽高。

  • IE 6+, Chrome 4+, Firefox 2+
  • Android 2.3+, iOS 6+
    • absolute + margin: auto 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    		 
    /* 这里引用复用代码 */

    .outer {
      position: relative;
    }

    .inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    该方案的原理是：使用了 CSS 中的定位属性（ absolute 、 fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width ，那么就会自动计算，把剩余的空间分配给 right 和 width 。如果 left 、 right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin ，并且左右均分，所以就实现了水平居中，垂直方向同理。

    但是要知道该方法的副作用：

  • left: 0; right: 0; 相当于 width: 100%;
  • top: 0; bottom: 0; 相当于 height: 100%;

    • 缺点：需要固定居中元素的宽高，否则其宽高会被设为 100% （副作用）。

  • IE 6+, Chrome 4+, Firefox 2+
  • Android 2.3+, iOS 6+
    • writing-mode

    writing-mode 可以改变文字显示方向。例如，将文字显示为垂直方向： 

    1
    		 
    <div>垂直显示</div>
    		 
    1




    

    2
    3
    		 
    div {
      writing-mode: vertical-lr;
    }

    显示效果如下： 

    1
    2
    3
    4
    		 
    垂
    直
    显
    示

    该属性最神奇的地方在于，不仅可以使文字显示方向改变，还能使所有作用于水平方向上的属性，变成作用于垂直方向。所以，通过 writing-mode 和 text-align: center 就可以实现垂直居中了。

    这里，我们需要改造下复用代码中的 DOM 结构： 

    1
    2
    3
    4
    5
    		 
    <div class="outer">
      <div class="inner">
        <div class="content"></div>
      </div>
    </div>

    然后，该方案的核心代码如下： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    		 
    /* 这里引用复用代码 */

    .outer {
      writing-mode: vertical-lr;
      text-align: center;
    }

    .inner {
      display: inline-block;
      width: 100%;
      height: auto;
      writing-mode: horizontal-tb;
      text-align: center;
    }

    .content {
      display: inline-block;
      text-align: left; /* 重置文字位置（如果需要） */
    }

    缺点：需要修改 DOM 结构（为了居中元素，需要嵌套两层父元素）。

    优点：不需要固定居中元素的宽高。

  • IE 6+, Chrome 4+, Firefox 3.5+
  • Android 2.3+, iOS 5.1+

    • 下面介绍只适用于水平居中的方案：

  • margin: auto
  • text-align + inline-block
  • fit-content + margin
    • margin: auto 
    1
    2
    3
    4
    5
    6
    		 
    /* 这里引用复用代码 */

    .inner {
      display: block; /* 还可以是 table | flex | grid，但不能是 inline-xxx */
      margin: 0 auto;
    }

    该方案的原理是：元素被设置成块级后，会独占一行，如果其宽度没有占满横向空间，那么剩余的空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin ，并且左右均分，所以就实现了水平居中。

    缺点：需要固定居中元素的宽。

    text-align + inline-block 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    /* 这里引用复用代码 */

    .outer {
      text-align: center;
    }

    .inner {
      display: inline-block;
      text-align: left; /* 重置文字位置（如果需要） */
    }

    该方案的原理是：上面代码中的 text-align: center; 会使文本居中，但是对块级元素无效，如果将元素设置为 inline-block ，该元素就会被当做文本对待，从而实现元素居中。

    缺点：为了居中元素，使文本也居中了，因此可能需要重置文本位置。

    优点：不需要固定居中元素的宽。

    fit-content + margin

    该方案用法有两种，一种是直接应用于元素上，另一种是应用于元素的父元素上。

  • 直接应用于元素上 

    1
    2
    3
    4
    5
    6
    		 
    /* 这里引用复用代码 */

    .inner {
      width: fit-content;
      margin: auto;
    }

    缺点：会使元素的宽度改变（同内容宽度）。

  • 应用于元素的父元素上 

    1




    

    2
    3
    4
    5
    6
    		 
    /* 这里引用复用代码 */

    .outer {
      width: fit-content;
      margin: auto;
    }

    优点：即使子元素是浮动元素也适用。

    由于目前 fit-content 属性兼容性较差，因此该方案不推荐使用。

    下面介绍只适用于垂直居中的方案：

  • table-cell + vertical-align
  • inline-block + line-height
  • inline-block + vertical-align
    • table-cell + vertical-align 
    1
    2
    3
    4
    5
    6
    		 
    /* 这里引用复用代码 */

    .outer {
      display: table-cell;
      vertical-align: middle;
    }

    优点：不需要固定居中元素的高。

    该方案可配合水平居中的方案 1、2，实现水平垂直居中，如下所示：

  • 配合水平居中方案 1 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    /* 这里引用复用代码 */

    .outer {
      display: table-cell;
      vertical-align: middle;
    }

    .inner {
      display: block; /* 还可以是 table | flex | grid，但不能是 inline-xxx */
      margin: 0 auto;
    }

    缺点：需要固定居中元素的宽。

    优点：不需要固定居中元素的高。

  • 配合水平居中方案 2 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    		 
    /* 这里引用复用代码 */

    .outer {
      display: table-cell;
      vertical-align: middle;

      text-align: center;
    }

    .inner {
      display: inline-block;

      text-align: left; /* 重置文字位置（如果需要） */
    }

    优点：不需要固定居中元素的宽高。

    inline-block + line-height 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    /* 这里引用复用代码 */

    .outer {
      line-height: 300px;
    }

    .inner {
      line-height: initial; /* 重置 */
      vertical-align: middle;
      display: inline-block;
    }

    众所周知，元素的 height 和 line-height 相同的时候，会使其文本内容垂直居中。因此该方案利用了这一特点，不过文本内容虽然垂直居中了，但是元素并没有，因此再将元素设置为 inline-block ，这样元素就会被当做文本对待了。同时由于具有了 inline 属性， vertical-align: middle; 也就可以生效了。

    缺点：需要知道其父元素高度。

    优点：不需要固定居中元素的高。

    该方案可配合水平居中的方案 2，实现水平垂直居中，如下所示： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    		 
    /* 这里引用复用代码 */

    .outer {
      line-height: 300px;

      text-align: center;
    }

    .inner {
      line-height: initial; /* 重置行高 */
      vertical-align: middle;
      display: inline-block;

      text-align: left; /* 重置文字位置（如果需要） */
    }

    缺点：需要知道其父元素高度。

    优点：不需要固定居中元素的宽高。

    inline-block + vertical-align 
    1




    

    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    /* 这里引用复用代码 */

    .outer::after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }

    .inner {
      display: inline-block;
      vertical-align: middle;
    }

    该方案的原理是：在居中元素的父元素上，使用一个伪元素，将这个伪元素设置为 inline-block 后，就好像它原来就是一个真正的 DOM 元素，存在于页面上。然后再将居中元素设置为 inline-block ，根据 inline-block 的特性（多个相邻的 inline-block 元素会横向并排显示），居中元素会和伪元素横向并排显示。并且设置 vertical-align: middle; 后，它们会互相垂直对齐，最后将伪元素高度撑起来 height: 100%; ，居中元素会对齐伪元素，从而实现了垂直居中。

    优点：不需要固定居中元素的高。

    该方案可配合水平居中的方案 2，实现水平垂直居中，如下所示： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    		 
    /* 这里引用复用代码 */

    .outer {
      text-align: center;
    }

    .outer::after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }

    .inner {
      display: inline-block;
      vertical-align: middle;

      text-align: left; /* 重置文字位置（如果需要） */
    }

    优点：不需要固定居中元素的宽高。

    本文介绍的方法中，除了 fit-content 方案和 Grid 方案兼容性较差，其他的方案都可以在实际项目中使用。每种方案都有其应用场景，应该根据实际业务灵活运用，而不是 Flex 一把梭。

    •  
    推荐文章
    阳刚的甜瓜  ·  访谈 | 智谷趋势为何受到国际主流媒体关注
    4 月前
    气势凌人的跑步机  ·  投资印度，恰逢其时？ | 摩根大通私人银行亚洲
    5 月前
    冷冷的松鼠  ·  跨越2000公里的24年扶贫路--党建-人民网
    8 月前
    深情的鞭炮  ·  提高综艺节目跨界主持质效的思考 - 军事记者
    8 月前
    酒量小的登山鞋  ·  如何使用VBA循环多个数组并显示值？
    1 年前
    Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
    link管理 - 链接快照平台