水平、垂直居中布局方案整理

taohonghui 发布于2019-08-30 12:45 / 1916人阅读

摘要：水平居中，相当于垂直居中，相当于文本式终极居中很容易便能看出，这其实是水平居中方案以及垂直居中方案的合用，也算是把文本排版的特性都利用了个遍了。

讨论前提

本文都是基于这样的HTML结构来进行讨论的：


    DEMO

水平居中 inline-block：inline-block + text-align

    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;
    }

inline-block是个很特殊的属性，既有inline文本的特性，又有block布局的特性；因此，用上inline-block，既可以让div像文本一样居中（text-align: center;），又不会影响div本身的宽高。
这个方案有个缺陷，就是由于在parent上设置了text-align: center，因此child里的元素都会继承这个text-align: center，需要重新设置个text-align: left来reset一下。

display: table/block + margin

这种方法非常常用，适用于需要用position:static把盒子撑起来的情况下的水平居中。但值得注意的是，使用block的话，child的默认宽度会撑满整个parent，因此需要显式地定义其width；而使用table的话，其默认宽度为child的内容宽度，这样一来，即使加上padding和border，也能顺利实现水平居中，在实际场景中是比block要好用的。

.child{
    display: table; //display: block;
    margin: 0 auto;
}

垂直居中 表格单元特性（table-cell）：table-cell + vertical-align

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

这个方案可能有一点费解，毕竟表格布局已经是上世纪的布局方式了，但当时布局所用到的一些特性，还一直被浏览器兼容着，其中就包括这个table-cell的方案。
从某种意义上来看，跟inline-block方案很相像，都是利用了文本排版的特性，但差别在于，本方案并不需要把child设置为inline-block也可生效。

水平、垂直同时居中 负值的margin：absolute + margin

这种方法也比较常用，先利用positions: absolute;left: 50%的特性，使child的左侧移至parent的水平中央处，然后再施以负的margin-left使child水平左移child宽度的一半距离，即最终使child的水平中央与parent的水平中央重合；在垂直方向上，也是一样的原理。
这个方法用起来不复杂，原理也很容易理解，但是缺点也非常明显：

要求child的宽度必须是固定的，而这在如今响应式布局横行的时代，似乎是有点过时了。

parent设置relative关系倒不大，但是child变absolute就脱离文档流了。
.parent {

position: relative;

}

.child {

width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;    //为width的一半，且为负值
margin-top: -100px;    //为height的一半，且为负值

}

负margin的替代方案：absolute + transform

从上文可知，负margin方案的问题在于要确定width和height，无法做到自适应；于是，为了要做到自适应，我们可以把负margin换成transform实现child自身的偏移。

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

由于transform这一属性在设置百分比类型的值时，其参照对象是自身，因此只需要各设置50%，就能实现往水平方向偏移自身宽度的一半，又或者是往垂直方向偏移自身高度的一半。
总体来说，这个方案灵活是够灵活的了，但是transform的兼容性堪忧，移动端还好说，PC端怎么敢用？

flex + justify-content + align-items

跟上文的transform方案想必，flex（弹性盒子）的方案兼容性就更令人担忧了，PC端不要闹了，连移动端要兼容起来也很麻烦，基本上是只能使用老版的弹性盒子了。

.parent{
    display: flex;
    justify-content: center;    //水平居中，相当于text-align
    align-items: center;    //垂直居中，相当于vertical-align
}

文本式终极居中： inline-block + text-align + table-cell + vertical-align

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

很容易便能看出，这其实是inline-block水平居中方案以及table-cell垂直居中方案的合用，也算是把文本排版的特性都利用了个遍了。

参考文章

Absolute Horizontal And Vertical Centering In CSS

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

GPU云服务器云服务器水平垂直居中水平居中布局垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115043.html

【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0