css布局之居中

在css中，居中是很常用的事情，因为大多数人都喜欢一种对称的美。对于居中来说，有的一个属性就可以解决，有的就需要一点技巧。我在之前的一片博客里写到了绝对定位的居中，不过那只是其中的一小部分。

先来一些人畜无害，简单的居中方法。

对于水平居中来说：

一，把margin设为auto

这种方法在使用的时候，需要把margin-left和margin-right设为auto，可以实现水平居中，但是只能适用于块级元素，而且对于浮动元素和绝对定位不适用。

二，设置text-align:center

这个属性只能对一些行内元素使用，即display为inline或者inline-block的才使用。

三，使用绝对定位来居中

原理是先让元素向右移动50%的距离，这个时候左边框正好在中间的位置，然后再向左移动元素宽度一般的距离，就可以使其居中。

<style type="text/css">
        .box{
            width:500px;
            height:300px;;
            margin-left:-250px;
            position:relative/absolute;
            left:50%;
            top:50%;
            background-color: #cc18b9;
        }
<div class="box">    
</div>

四，另一种使用绝对定位来居中的方法

<style type="text/css">
        .box{
            width:500px;
            height:300px;           
            position:absolute;
            left:0;
            top:0;
            bottom:0;
            right:0;
            margin:auto auto;
            background-color: #cc18b9;
        }
<div class="box">    
</div>

特别需要注意的就是这个方法，如果要水平居中，需要把left和right都设置为0，然后margin-left和margin-right都设置为auto;如果需要垂直居中，可以采用同理的方法。

对于垂直居中：

一，对行级元素居中

使line-height与父级元素的height一致。

二，对块级元素居中

1，首先直接使line-height和父级的height相等。

2，然后使用display:inline|inline-block,vertical-align:midden。

.box {
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            line-height: 200px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            display: inline-block;
            vertical-align: middle;
            background: hotpink;

        }
<div class="box">
    <div class="box2"></div>
</div>

三 ，对于父元素高度不确定的

父元素的padding-top和padding-bottom一样 。