CSS常用布局实现01-水平居中

1. 简介

居中是我们平常遇到的很常见的一种布局方式，主要分为水平居中，垂直居中，水平垂直居中。每种情况又分为，已知宽度，不知宽度，对块级元素居中，对行内替换元素水平居中，对行内非替换元素水平居中等等。本来我按照这个分类写好了一篇文章，但是觉得太偏理论分类，不好理解。于是我换个角度重新来写，从需求的角度来分析。那就是什么时候我们需要水平居中。

2. 文本水平居中

这应该是最常见的需求了。如何让文本实现水平居中呢？

    
    
    



    一段文本

你一定会想到使用text-align即可。结果如下所示：

但是我们此时无法选中这段文本进行操作，比如为它设置背景。其实此处文本被视作匿名行内元素来处理。（可以看 CSS进阶02-盒模型进阶）。那我们试着用一个实际的行内级元素将其包裹。如下：

    
    
    



    一段文本

也是水平居中。

好的，看起来很完美，行内非替换元素设置text-align: center即可。但如果我们所想要的并不只是文本呢？比如，在这个行内元素内部在放一个其他的元素呢？
答案是，除了放置文本和包含文本的行内级元素，其余情况都不行。
因为非替换行内级元素无法设置宽高，而且text-align: center设置的效果是文本居中。
所以这种方法非常简单，但只适用于有限的情况。

2. 图片居中

这应该也算是一个很常见的场景。看下面代码：

可以看到同样可以使用text-align来居中，记得设置"font-size: 0;"。这种方法也可以用于其他行内替换元素，比如input等。

3. 包含有非行内元素的元素居中

前面包含的文本和图片都是行内元素，假设现在包含有一个块级元素比如div，如何让他居中呢？这也是一个很常见的场景，一个可以包含各种内容的区域在外部区域中间。
方法1：最常见的做法就是使用margin，如下：

    
    
    




    
inner content

这种方法可以轻易实现水平居中效果，但是有个缺点，那就是必须为inner设置宽度，因为div默认是占据整行的。

方法2：利用inline-block。
我们前面说到非替换行内级元素无法设置宽高，那么如果是使用行内块元素呢？对外利用行内布局特性居中，对内依然向块级元素一样表现。此时里面可以放置各种类型的元素。

可以看到，设想正确，但是同样要注意，需要设置"font-size: 0;"防止html的空格产生的间隙。

使用这种方法有个副作用，就是内部文本也会居中，可以为内部元素设置text-align:left来消除这种副作用。

第三种方法：flex，也是最应该使用的方法。目前的兼容性已经很不错了，而且会越来越好。

    
    
    



    
inner content

你甚至不需要为子元素设置额外的css属性。

第四种方法： grid。和flex其实是一样的。

    
    
    



    
inner content

4. 其他

其实主要就是以上三种场景，至于其他场景和实现方法我们会在水平垂直居中的文章中讨论。