CSS几种居中方式

text-algin普通居中

首先使指定div样式
div{ border:2px red dotted }

/*------------居中----------*/
#boxCenter{
    text-align: center;
}

<h1>居中</h1>
    <div id="divBox">
        <p id="boxCenter">居中居中居中居中</p>
        <div id="boxCenter"><img src="http://static.tieba.baidu.com/tb/editor/images/client/image_emoticon25.png" alt="滑稽"/>
        </div>
    </div>

效果：

定宽元素居中

本质利用了margin的属性特点

#boxWidth{
    width: 200px;/* width不能删除，否则无法居中 */
    margin: 10px auto;
}

    <h2>定宽元素</h2>
    <div id="boxWidth">定宽元素定宽元素定宽元素</div>

效果：

不定宽元素居中

有三种居中方式

利用table居中

table{
    border: 2px red dotted;
    margin: 0 auto;
}

    第一种
    <table>
        <tr><td>第一种</td><td>第一种</td><td>第一种</td></tr>
    </table>

效果图见最后

利用ul居中

.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}


第二种
    <div class="container">
        <table>
            <tr><td>
                <ul>
                    <li>第1行元素</li>
                    <li>第2行元素</li>
                    <li>第3行元素</li>
                </ul></td>
            </tr>
        </table>
    </div>

效果图见最后

利用relative居中

/* 第三种居中方法 */
.container_2{
    float:left;
    position:relative;
    left:50%
}

.container_2 ull{
    margin:0;
    padding:0;
    float:left;
}
.container_2 lii{
    float:left;
    display:inline;
    margin-right:8px;
}


第三种<br/>
    <div class="container_2"> 
        <ull><lii>1</lii><lii>2</lii><lii>3</lii></ull>
    </div>

第三种居中方法效果图：