水平居中

水平居中（总结目前已知道的，后续会继续添加）

子元素为：

1. 行内元素
2. 定宽块状元素
3. 不定宽块状元素

1、对于子元素是行内元素，对它的父元素设置text-align:center;

*{
	margin:0;
	padding:0;
	list-style:none;
}
#wrap {
	text-align:center;
}
<div id="wrap">
    <span>水平居中</span>
</div>

2、对于定宽块状元素，设置margin:0 auto;

*{
	margin:0;
	padding:0;
	list-style:none;
}
#wrap {
	margin:0 auto;
	background-color:#0F0;
	width:200px;
}
<div id="wrap">水平居中水平居中水平居中</div>

3、不定宽块状元素：

一、设置子元素为display:inline;在其父元素上设置text-align:center;

*{
	margin:0;
	padding:0;
	list-style:none;
}
#wrap {
	text-align:center;
}
p{
	display:inline;
}
<div id="wrap">
   <p>水平居中水平居中水平居中</p>
</div>

下面补充两种不定宽块状元素水平居中的方法：

二、加入table标签：利用table标签的长度自适应性，即不定义其长度也不默认其父元素body的长度，（table的长度根据其文本的长度决定。）因此可以看做一个定宽块状元素。再利用定宽块状元素的margin方法水平居中。

table{
       margin:0 auto;
       border:1px solid;
}
<div>
        <table>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>我要居中</li>
                            <li>我要居中</li>
                            <li>我要居中</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
 </div>   

三、通过设置浮动和和相对定位来实现，通过给父元素设置float，然后给父元素设置position：relative和left:50%，子元素设置position:relative和left:-50%.

.container{
		border:1px solid red;
		float:left;
		position:relative;
		left:50%;
}
.container ul{
		border:1px solid yellow;
		position:relative;
		left:-50%;
		overflow:hidden;
}
.container ul li{
		float:left;
		display:inline;
		margin-right:8px;
}
<div class="container">
        <ul>
            <li>我要居中</li>
            <li>我要居中</li>
            <li>我要居中</li>
        </ul>
</div>   

4、使用flex，对于上述三种情况均适用

*{
	margin:0;
	padding:0;
	list-style:none;
}
p{
	display:flex;
	justify-content:center;
}
<div id="wrap">
    <p>水平居中水平居中水平居中</p>
</div>