CSS 探索系列之元素居中

元素居中是前端开发高频基础场景，分为水平居中、垂直居中、水平-垂直同时居中三大类。不同方案存在各自适用条件与边界限制，例如是否要求子元素固定尺寸、是否支持多行内容、浏览器兼容性等。

<style>
    section {
        display: none;
        height: 300px;
        color: #0aa;
        border: 1px solid #0aa;
    }

    section .item {
        width: 300px;
        height: 150px;
        color: #fff;
        background: #0aa;
    }
</style>
<section>
    <div class="item">
        玉炉香，红蜡泪，偏照画堂秋思。眉翠薄，鬓云残，夜长衾枕寒。梧桐树，三更雨，不道离情正苦。一叶叶，一声声，空阶滴到明。
    </div>
</section>

原型 - DEMO

水平居中（2）

margin: 0 auto

适用：块级 block 元素，子元素需要设置确定宽度。

原理：普通流块级元素，剩余可用空间被左右 margin: auto 平分，实现水平居中。

注意：子元素不设置 width，则 width:auto 会直接填满父容器，没有剩余空间，margin:auto 不会产生居中效果。

<section>
    <div class="item" style="margin: 0 auto;">
        玉炉香，红蜡泪，偏照画堂秋思。眉翠薄，鬓云残，夜长衾枕寒。梧桐树，三更雨，不道离情正苦。一叶叶，一声声，空阶滴到明。
    </div>
</section>

margin - DEMO

text-align: center

适用：行内、inline-block 元素；作用在父容器。

注意：仅对行内级内容生效；块级子元素本身不会被 text-align:center 居中。

<section>
    <div class="item" style="margin: 0 auto; text-align: center;">
        玉炉香，红蜡泪，偏照画堂秋思。眉翠薄，鬓云残，夜长衾枕寒。梧桐树，三更雨，不道离情正苦。一叶叶，一声声，空阶滴到明。
    </div>
</section>

center - DEMO

垂直居中（2）

height + line-height

父容器 height 与 line-height 设置相同数值，利用半行距均分实现单行文字视觉垂直居中。

备注：一旦文本换行变成多行，该方案失效；属于视觉近似居中，不同字体度量会存在微小偏移。

<section>
    <span style="height: 300px; line-height: 300px;">
        玉炉香，红蜡泪，偏照画堂秋思。
    </span>
</section>

line-height - DEMO

伪元素对齐（inline-block + vertical-align）

原理：创建一个高度 100% 的 inline-block 伪元素作为参考标杆，子元素同样设置 inline-block，二者使用 vertical-align:middle 完成垂直对齐。

适用：父容器高度固定，子元素内容高度不确定（支持多行）。

注意：inline-block 元素之间会存在空白间隙，需要父容器设置 font-size:0 消除；子元素要重新恢复字号。子元素宽度 100% 时，会出现右侧细微空白。

<style>
    .after-vertical {
        font-size: 0;
    }
    .after-vertical .wrapper {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
    }
    .after-vertical::after {
        display: inline-block;
        width: 0;
        height: 100%;
        content: ' ';
        visibility: hidden;
        vertical-align: middle;
    }
</style>
<section class="after-vertical">
    <div class="wrapper">
        要走的终究是要走，想离开的最终还是会离开，没有那些敷衍的理由，留下的，只是那些没有保鲜期的诺言；一本往事录，合上的是谁的归宿，那曾经盛开的花，只不过是擦肩而过的幸福。
    </div>
</section>

伪元素 - DEMO

水平垂直居中（8）

Flex 布局（现代最常用）

父容器开启 flex，justify-content:center 控制水平；align-items:center 控制垂直。

适用范围广：块、行内元素，单行、多行内容，子元素尺寸无需固定。

<section>
    <div style="display: flex; height: 300px; justify-content: center; align-items: center;">
        <div style="width: 80%;">
            《童年．花草记忆》一念花开，一念花落。这山长水远的人世，终究是要自己走下去。人在旅途，要不断的自我救赎。(桂花)
        </div>
    </div>
</section>

flex - DEMO

position + transform

原理：先 top:50%;left:50% 把元素左上角移动到容器中心，再通过 translate(-50%, -50%) 以元素自身为基准回退一半宽高，实现居中。

注意：transform 会创建新的层叠上下文；部分旧浏览器会出现字体轻微模糊。

<section style="position: relative;">
    <img style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 240px;" src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/梅花泪.png" />
</section>

transform - DEMO

Grid 布局

Grid 容器内部子项 margin:auto 可以同时吃掉水平、垂直两个方向剩余空间，实现完全居中。

适用：父开启 grid，子元素设置 margin:auto；不需要子元素固定宽高。

<section>
    <div style="display: grid; height: 300px;">
        <div style="width: 80%; margin: auto;">
            来者要惜，去者要放。人生是一场旅行，不是所有人都会去同一个地方。路途的邂逅，总是美丽，分手的驿站，总是凄凉。不管喜与愁，该走的还是要走，该来的终究会来。人生的旅程，大半是孤单。懂得珍惜，来的俱是美丽；舍得放手，走的不成负担。对过去，要放；对现在，要惜；对将来，要信
        </div>
    </div>
</section>

grid - DEMO

position + margin: auto（绝对定位）

子元素设置 position:absolute，四个方向 inset 全部赋值（top、right、bottom、left）。

注意：子元素尺寸小于父容器，完全居中；子元素宽大于父容器，水平方向左对齐；子元素高大于父容器，垂直方向居中。

<section style="position: relative; height: 500px;">
    <img
         style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px;"
         src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141711_6640njffmwvi_small.jpg"
         />
</section>

margin-auto - DEMO

position + calc()

通过 calc() 直接计算定位值：50% − 自身尺寸一半。

限制：子元素必须固定宽高。

<section style="position: relative;">
    <div style="position: absolute; top: calc(50% - 75px); left: calc(50% - 150px); width: 300px; height: 150px; overflow: hidden;">
        走得顺时，不必太张狂，就算你爬到了坡顶，终究还要走下坡路；<br> 走得快时，无须太得意，你的脚力总是有限的，不如放慢脚步把短暂的路走得精彩些；
        <br> 走得累时，莫要太哀叹，要知道歇一歇，经受了劳累，才知道坚强与珍惜；
        <br> 走得苦时，切勿太悲怆，生活里是没有绝路的，苦难是人生的梯，助你走出低谷和沼泽。
    </div>
</section>

calc - DEMO

table-cell 布局

利用表格单元格的固有特性：text-align:center 水平，vertical-align:middle 垂直。

适用：行内、inline-block 内容；支持单行、多行文本。

注意：父元素需要依赖外部容器控制整体宽高；display:table-cell 元素不要同时设置 float，会破坏表格布局。

<section>
    <div style="display: table-cell; height: 300px; text-align: center; vertical-align: middle;">
        <div style="display: inline-block; width: 80%;">
            曾以为真情会在你我的心间永驻，曾以为一辈子都要爱下去。但终究，时光也会老去，人心也会变淡，走着走着便忘了曾经，想着想着便走错了地方。有一天还是要面对分离，面对这情深缘浅的现实；有一天我们会分道杨镳，变成了最熟悉的陌生人。
        </div>
    </div>
</section>

table-cell - DEMO

background 图片居中

background-position:center 实现背景图居中，可以配合 background-size 控制图片缩放。

仅用于背景图片，不能控制 DOM 元素。

<section style="background: url(https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141711_9501mvvwvonf_small.jpg) no-repeat center; background-size: 80%; height: 500px;"></section>

background - DEMO

padding 填充

适用于父容器大小不固定场景，依靠上下 padding 撑开空间实现视觉居中；多用于内部内容高度完全动态的场景。

总结

现代项目优先推荐：

Flex 布局：适用范围最广，支持任意内容类型、单行多行、动态尺寸，是当前主流方案。
Grid 布局：与 Flex 类似，通过 margin:auto 即可实现双向居中，简洁高效。
position + transform：兼容性好，适用于固定或动态尺寸，不依赖父容器布局模式。

按需求选择：

仅水平居中：块级元素用 margin: 0 auto（需固定宽度）；行内元素用 text-align: center。
仅垂直居中：单行文本用 line-height；多行内容用伪元素 + vertical-align 或 Flex。
水平垂直同时居中：优先 Flex 或 Grid；需兼容旧浏览器可用 position + transform。

特殊限制：

position + calc()、position + margin（负值）：必须固定子元素宽高，灵活性差，不推荐作为首选。
table-cell 布局：适合表格类数据展示，普通场景已被 Flex 替代。
background 居中：仅适用于背景图片，无法控制 DOM 元素。

选择方案时需综合考虑：内容类型（块级、行内）、尺寸是否固定、是否多行、浏览器兼容性要求。

CSS探索系列元素居中