不定宽块级元素水平居中

一：看了慕课网有3种居中方式

1：将要居中的元素加入到table标签中的td标签里面

2：将块级元素设置成内联元素，display:inline

3: 设置父元素position:relative ，display:inline-block,margin-left:50%,子元素margin-left:-50%

二：将要居中的元素加入到table标签中的td标签里面

主要是利用table td中的元素垂直水平居中

<style type="text/css">
table{
border:1px solid #186645;
margin: 0 auto;
}
</style>

<div>
<table>

<tr>
<td>水平居中</td>
</tr>
</table>
</div>

三：将块级元素设置成内联元素，display:inline

主要是利用内联元素的text-aligin:center

<style type="text/css">
.container{
text-align: center;
}
.container ul li{
display: inline;
}
</style>

<div class="container">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul>
<li><img src="img/header.png"></li>
</ul>
</div>

四：设置父元素position:relative ，display:inline-block,margin-left:50%,子元素margin-left:-50%

慕课上面说父元素:float:left;left:50%

没必要用浮动，因为居中的原理是，先将父元素分成50%的两份，然后子元素的起始位置就是父元素50%的位置，因为父元素设置了display:inline-block;子元素margin-left:-50%,就是相对于父类实际的宽度向左偏移了50%；

<style type="text/css">
.container{
position: relative;
margin-left: 50%;
float: left;
border: 1px solid red;
}
.container img{
margin-left: -50%;
border: 1px solid green;
}
.container span{
margin-left: -50%;
border: 1px solid blue;
}
</style>

<div class="container">
<img src="img/header.png">
</div>
<div class="container">
<span>hhhhhhhhhhhhhhhhhhhhh</span>
</div>