css之元素水平居中
元素水平居中是css中的常见问题，在css中元素要么是定宽，要么是不定宽，对于定宽元素，要实现其水平居中是非常容易的，但对于不定宽元素，要实现其水平居中略微复杂些，本文从定宽和不定宽两个角度来探究一下实现元素水平居中的常见方法。
一、定宽元素的水平居中
1，通过设置元素的margin-left和margin-righ为auto实现其水平居中，对于定宽元素来说，该方法最为简单
2 .demo{ width:100%; background:#9FC;}
3 .have-w div{ width:150px; line-height:50px; text-align:center; background:#0C6;}
4 .demo1 div{ margin:0 auto;}
5 </style>
6 <div class="demo have-w demo1">
7 <div>定宽元素水平居中</div>
8 </div>
2，通过设置元素的position+margin实现其水平居中，该方法要点元素的外边距=-元素width/2
2 /*接上面样式*/
3 .demo2{ position:relative;}
4 .demo2 div{ position:absolute; left:50%; margin-left:-75px;}
5 </style>
6 <div class="demo have-w demo2">
7 <div>定宽元素水平居中</div>
8 </div>
3，通过设置父元素的text-align:center来实现子元素水平居中，注意如下只有一个元素需要水平居中的时候不需要设置*display:inline;*zoom:1来兼容IE6\7，因为在IE6\7下，父元素的text-align:center可以让子元素本身水平居中（其他浏览器中父元素的text-align:center让子元素内的文本水平居中），如果是多个元素需要水平居中（比如一组横排的按钮）则需要设置*display:inline;*zoom:1来兼容IE6\7
2 /*接上面样式*/
3 .demo3{ text-align:center;}
4 .demo3 div{ display:inline-block;}
5 </style>
6 <div class="demo have-w demo3">
7 <div>定宽元素水平居中</div>
8 </div>
二，不定宽元素水平居中
这里说的不定宽元素是指元素宽度随着内容的宽度自动伸缩改变的元素，行内元素的水平居中只需要设置父元素的text-align:center就能居中了没有什么好说的。
1，text-align+inline-block实现元素水平居中，设置元素display为inline-block可以让元素宽度随内容宽度改变
2 /*接上面样式*/
3 .no-w{ line-height:50px; }
4 .no-w div{background:#096;}
5 .demo4{ text-align:center;}
6 .demo4 div{ display:inline-block; *display:inline;*zoom:1;}
7 </style>
8 <div class="demo no-w demo4">
9 <div>不定宽元素水平居中</div>
10 </div>
2，float+position实现元素的水平居中，该方法中，需要多嵌套一层标签（如下），首先设置div为float:left是为了上div宽度随内容宽度自动改变，然后将其定位到距离画布左侧50%的位置，再定位div内容器p（真正水平居中的容器）距离div右侧50%（或者left为-50%也可以，p是相对与div的，因此50%的距离等于div宽度的一半），以此来达到p在视觉上相对于画布水平居中
2 /*接上面样式*/
3 .no-w div{background:none;}
4 .demo5{ overflow:hidden; zoom:1;}
5 .demo5 div{ float:left;position:relative; left:50%; }
6 .demo5 div p{ position:relative; right:50%;background:#096; float:left;}
7 </style>
8 <div class="demo no-w demo5">
9 <div><p>不定宽元素水平居中</p></div>
10 </div>
