乐趣区

关于前端:了解实现css水平垂直居中的方法

jiezi

CSS 居中是前端工程师常常要面对的问题，也是基本技能之一。

明天将以往应用过的办法做一个总结，包含程度居中，垂直居中及程度垂直居中计划。本文对一些相似计划进行归类总结，整顿后果如下。前面如有新计划，还会陆续的补充进来。

DEMO

<style>
.element_box {
    width: 600px;
    height: 300px;
    color: #0aa;
    border: 1px solid #0aa;
}
.element_item {
    width: 300px;
    height: 150px;
    margin: 0 auto;
    color: #fff;
    background: #0aa;
}
</style>

<div class="element_box">
    <div class="element_item"></div>
</div>

程度居中

1.margin：auto

块（block）元素程度居中，子元素 margin: auto。

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

查看 DEMO

2.text-align：center

行内（inline-block、inline）元素程度居中。父元素 text-align: center。

<section>
    <style>
        .element_box2 {text-align: center;}
    </style>
    <div class="element_box element_box2">
        <span>
            曾认为真情会在你我的心间永驻，<br>
            曾认为一辈子都要爱上来。<br>
            但究竟，时光也会老去，人心也会变淡，<br>
            走着走着便忘了已经，<br>
            想着想着便走错了中央。<br>
            有一天还是要面对拆散，<br>
            面对这情深缘浅的事实；<br>
            有一天咱们会分道杨镳，<br>
            变成了最相熟的陌生人。</span>
    </div>
</section>

查看 DEMO

垂直居中

3.height + line-height

单行文字垂直居中，父元素height 值 === line-height 值。

<style>
    .element_box3 {
        height: 300px;
        line-height: 300px;
    }
</style>
<div class="element_box element_box3">
    <span> 玉炉香，红蜡泪，偏照画堂秋思。</span>
</div>

查看 DEMO

4. 幽灵元素

如果一个父元素中，有两个 inline-block 的子元素，且这两个子元素vertical-align: middle，那么这两个元素在垂直方向是居中的。

思路再扩大下，如果其中一个子元素的高度跟父元素一样，那么这两个子元素，在父元素都是垂直居中了。按此思路，元素垂直居中的实现：给父元素设置一个伪元素，display: inline-block; width: 0; height: 100%，且设置为在页面不可见，咱们称这个伪元素为 ” 幽灵元素 ”，通过给幽灵元素和子元素设置 vertical-align: middle 能够实现垂直居中。

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

查看 DEMO

留神：子元素宽度为 100% 时，右侧会有一丝空白。

程度垂直居中

5.table-cell 布局

行内元素、单行、多行文字水平垂直居中。

<style>
    .element_box5 {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .element_item5 {
        display: inline-block;
        width: 80%;
    }
</style>
<div class="element_box element_box5">
    <div class="element_item5">
        曾认为真情会在你我的心间永驻，曾认为一辈子都要爱上来。但究竟，时光也会老去，人心也会变淡，走着走着便忘了已经，想着想着便走错了中央。有一天还是要面对拆散，面对这情深缘浅的事实；有一天咱们会分道杨镳，变成了最相熟的陌生人。</div>
</div>

查看 DEMO

6.flex 布局

块元素、行内元素、单行、多行文字水平垂直居中。

<style>
    .element_box6 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .element_item6 {width: 80%;}
</style>
<div class="element_box element_box6">
    <div class="element_item6">《童年．花草记忆》一念花开，一念花落。这山长水远的人间，究竟是要本人走上来。人在旅途，要一直的自我救赎。(桂花)
    </div>
</div>

查看 DEMO

7.grid

<style>
    .element_box7 {display: grid;}
    .element_item7 {
        width: 80%;
        margin: auto;
    }
</style>
<div class="element_box element_box7">
    <div class="element_item7">
        来者要惜，去者要放。人生是一场旅行，不是所有人都会去同一个中央。道路的邂逅，总是漂亮，离别的驿站，总是苍凉。不论喜与愁，该走的还是要走，该来的终究会来。人生的旅程，大半是孤独。懂得珍惜，来的俱是漂亮；舍得撒手，走的不成累赘。对过来，要放；对当初，要惜；对未来，要信
    </div>
</div>

查看 DEMO

8.position + 负 margin

实用于固定大小的块级元素，margin-left、margin-top为元素宽、高的一半。

<style>
    .element_item8 {
        position: relative;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 224px;
        margin-top: -112px;
        margin-left: -200px;
    }
</style>
<div class="element_box">
    <img class="element_item8" src="img/20190419141710_4735vxaqwhri_small.jpg" />
</div>

查看 DEMO

9.position + calc()

实用于固定大小的块级元素，calc计算50% - 元素宽或高的一半。

<style>
    .element_box9 {position: relative;}
    .element_item9 {
        position: absolute;
        top: calc(50% - 75px);
        left: calc(50% - 150px);
        width: 300px;
        height: 150px;
        overflow: hidden;
    }
</style>
<div class="element_box element_box9">
    <div class="element_item9">
        走得顺时，不用太张狂，就算你爬到了坡顶，究竟还要走下坡路；<br>
        走得快时，毋庸太得意，你的脚力总是无限的，不如加快脚步把短暂的路走得精彩些；<br>
        走得累时，莫要太悲叹，要晓得歇一歇，禁受了操劳，才晓得刚强与珍惜；<br>
        走得苦时，切勿太悲怆，生存里是没有死路的，苦难是人生的梯，助你走出低谷和沼泽。</div>
</div>

查看 DEMO

10.position + margin: auto

<style>
    .element_box10 {
        position: relative;
        display: inline-block;
        width: 49%;
    }
    .element_item10 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        height: auto;
    }
</style>
<div class="element_box element_box10">
    <img class="element_item element_item10" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box10">
    <img class="element_item element_item10" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>

查看 DEMO

11.position + transform

<style>
    .element_box11 {
        position: relative;
        display: inline-block;
        width: 49%;
    }
    .element_item11 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
    }
</style>
<div class="element_box element_box11">
    <img class="element_item element_item11" src="img/20190419141711_6640njffmwvi_small.jpg">
</div>
<div class="element_box element_box11">
    <img class="element_item element_item11" style="width: 150px;" src="img/c1647f58eed70de7fd7a19a63347d137.jpg">
</div>

查看 DEMO

12.background

实用于图片的居中。

<style>
    .element_box12 {background: url(img/20190419141711_9501mvvwvonf_small.jpg) no-repeat center;
        background-size: 80%;
    }
</style>
<div class="element_box element_box12"></div>

查看 DEMO

13.padding 填充

这种罕用于父元素大小不固定的场景。

总结

居中实现计划有很多，自己比拟罕用的是：flex 布局、position + transform。上述程度垂直居中计划中：计划 8、计划 9 只实用于仅居中元素已固定宽高。

退出移动版