CSS居中之道

css布局里居中问题是最基本也是平时布局时都会遇到的问题，虽然之前也积累了几种居中的方法，但实际做页面布局时发现不知道选择哪种居中方法好，甚至有的居中方案能解决布局，但会引发一些小问题，后期维护起来也麻烦，感觉像hack一样，只是为居中而居中，因此总结几种平时都会用到的方案，并针对其原理和适用场景进行分析和总结。

文本居中

1、单行文本居中

单行文本居中很简单，如果元素高度固定，直接让行高等于元素高度即可：

    p {
        height: 10px;
        line-height: 10px;
    }

如果元素高度不固定，只要保证上下内边距相等，文字自然就垂直居中了。

2、多行文本居中

多行文本居中在元素高度不固定的情况下方法同上，当元素高度固定时，可以使用

    p {
        display: table-cell;
        vertical-align: middle;
    }

文本立马居中，效果立竿见影，杠杠的，这是利用表格元素的特性居中，引发的问题是元素性质改变了，因为表格和常规块元素不一样，不能设置外边距，能设置内边距，表格宽度与内容区有关，不是占满一行，所以当想给元素添加背景色时效果不理想，所以在复杂的不居中，此种方法效果不佳，只能起到临时居中作用，所以在平时布局中，除非是比较简单的页面，其周围没有太多的元素与之相关才会用到，更多的我是用display:inline-block后面细讲。

元素居中

3、利用绝对定位

1）绝对定位的居中方案一般都见过：
html代码为：

    <div class="wrapper">
        <div class="test"></div>
    </div>

css代码：

    .wrapper {
        position: relative;
        width:200px; 
        height:100px;
        background-color: gray; 
    }
    .test {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 80px;
        height: 50px;
        margin: auto;
        background-color: lightblue;
    }

效果图：

第一次看到这种方案时也被深深的惊叹到了，觉得神奇无比，于是感觉任何居中问题都不是问题了，只要此法一出，必然搞定，但随着学习的深入其实发现这种方法也有适用场景，且要求苛刻。首先我们得明白其原理：绝对定位元素的位置由top等四个属性决定。一旦确定上下或左右位置，元素位置就固定了，内部div绝对定位后把四个属性值都设为零，其实就是要求元素占满整个空间，而定位元素的的位置也受外边距影响，也就是说外边距也算进元素占据的空间，所以这里运用了外边距的妙用，而外边距设置为auto，所以外边距就一直扩充到父元素的内边框为止（注意：不是内容区，绝对定位计算包括内边距），所以子元素就居中了，所以这里的关键是margin:auto，而限制条件是必须宽高固定，否则变化的就是宽高，而不是外边距，那是就起不到实际要的效果了，看图：

而仅仅把高度设置去掉后就有可能不再居中，因此使用要注意。
2）绝对定位的另一种方法时用百分比，代码如下：
html：

    <div class="wrapper">
        <div class="test">测试文字</div>
    </div>

css：

    .wrapper {
        background-color: gray; 
        width:200px; 
        height:100px;
        position: relative;
    }
    .test {
        background-color: lightblue;
        position: absolute;
        width: 80px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -40px;
    }

原理很简单，只要在定位后便宜自身宽高一半的距离即可，这也是运用了外边距，不过这一次是负的外边距，负外边距可以理解缩小占据的空间，从而改变定位的起点，对于宽高不确定，可以用css3的转换属性：

    .test {
        transform: translate(-50%,-50%);
    }

4、利用相对定位居中

将父元素偏离自身宽高各一半处，再讲子元素向相反的方向偏离也可达到居中的效果：
html：

    <div class="wrapper">
        <div class="test1">
            <div class="test"></div>
        </div>
    </div>

css：

        .wrapper {
            width:200px; 
            height:100px;
            background-color: gray; 
        }
        .test1 {
            position: relative;
            left: 50%;
            top: 50%;
            width: 80px;
            height: 50px;   
        }
        .test {
            position: relative;
            left: -50%;
            top: -50%;
            width: 80px;
            height: 50px;
            background-color: lightblue;
        }

这种方法需要多增加一个父元素，且必须宽高固定，实际很少用到，但可以了解到相对定位的一些用途，仅作了解。

5、利用内联块级元素

将元素设置为display:inline-block，就可以运用垂直居中属性，一如上面提到的表格居中一样，但与表格居中不同的是垂直居中属性不是对元素内部的文本起作用的，而是让元素本身与行内元素对齐，我们知道在插入图片是，默认图片是与行内元素的基线对齐的，也可以设置vertical:top或vertical:middle设置为顶部或中线对齐，因此此种方法就是利用vertical:middle的特性来实现垂直对齐的，为了对齐元素，必须设置一个参照物，因为默认的是与周围的行内元素对齐，但实际周围没有内联元素，如把列表的li设置为display:inline-block，所以我们可以自己添加参照物，可以在html里添加元素，但这样会增加空的元素，代码量加大，所以实际中我利用的是before伪元素，代码如下：
html：

    <div class="wrapper">
        <div class="test">Lorem ipsum dolor sit amet.</div>
    </div>

css：

    .wrapper {
        width:200px; 
        height:100px;
        background-color: gray;
    }
    .wrapper:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .test {
        display: inline-block;
        width: 80px;
        vertical-align: middle;
        background-color: lightblue;
    }

效果图：

注意：需要把伪元素高度设置为100%，即与父元素高度相同，然后伪元素和要居中的元素距设置为vertical-align: middle;
这种方法可以不要求元素的高度固定，所以比较灵活。

6、其它情况

实际布局中也会遇到很多种居中问题，有时需要合理的分析场景进行属性设置，例如对于宽度不确定的块级元素如何水平居中，要想实现居中，首先必须使元素仅仅包裹着子元素，即宽度不能是占据一行，否则很难居中，方法有把元素设置为浮动，因为浮动元素宽度由子元素决定，再用js写使其居中，如下：

    var $content = $(".content");
    var cWidth = $content.width();
    var pWidth =  $content.parent().width();
    if (pWidth > cWidth) {
        $content.css({"margin-left": (pWidth-cWidth)/2 + "px"});
    } else {
        $content.css({"margin-left": 0});
    }

代码用了jQuery，用原生js写也可以，这样可以根据问题实际解决，缺点是增加了js代码，不是很理想，另一种方法是display:table，table和table-cell一样，宽度由内容决定，所以这样设置再写margin：auto即可。

总结：居中的方案各种各样，关键是根据实际场景选择合适的，易维护的，暂时总结的方法就这么多，后期若遇到其它的问题和场景再作补充