CSS实现居中的方法

CSS实现居中的方法

1.使用width和margin实现水平居中

　　width指定完宽度，就可以直接margin:0 auto;实现水平居中了

2.使用text-align实现水平居中

　　使内联元素居中，所以要在想居中的内联元素的父元素中使用

3.使用top,left和margin实现水平垂直的居中（但不如下面第4种方法简单）

　　方法就是top: 50%;left: 50%;然后margin: -所在盒子宽度/2 0 0 -所在盒子高度/2;(可用于弹窗弹出到页面正中间)

4.使用 margin:auto 实现块级元素水平垂直的居中

HTML:

<div class="father">
    <div class="son"></div>
</div>

CSS:

.father {
    width: 300px; height: 150px;
    background-color: #f0f3f9;
    position:relative;
}
.son { 
/*重要部分*/
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
/*重要部分*/
    width: 200px; height: 100px;
    background-color: #cd0000;
    
}

5.使用line-height实现内联元素垂直居中

　　如果该内联元素只有单行文本，那么连height都不用设置，直接设置一个line-height属性就可以。

　　原理为line-height=行距+font-size，即行距的上下等分机制。具体见《CSS世界》一书中5.2.2节，其中还有多行文本或替换元素的垂直居中如何用line-height和vertical-align实现。