乐趣区

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

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-leftmargin-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 只实用于仅居中元素已固定宽高。

退出移动版