css水平居中

css居中

1. 行内元素居中
   只针对行内元素居中的话，如文字，按钮等inline显示模式的元素，居中方法可给其父元素添加text-align即可，如果块级元素被设置成inline的话，也是适用的，但在收到float影响时会失效。

2. 块级元素居中

   • 定宽块级元素居中
     如果块级元素的宽度固定可给其设置margin为auto来实现居中，margin：0 auto; 的意思是上下边距为0，左右边距自适应为相同值，完成写法为margin：0 auto 0 auto ; 四个参数分别代表上右下左四个边距。
   • 限制条件，固定宽度，否则块级元素默认占据父元素一整行，此设置失效，对浮动元素无效。

3. 不定宽块级元素居中

   1. 包裹在ttable标签中，然后给table标签设置margin： 0 auto 实现居中。
   2. 或给元素设置display: table 让后给元素设置margin : 0 auto 实现居中。
   3. 让父级浮动，设置display:relative; left:50%; 给子元素设置display:relative; -left:50%;实现居中效果;

   	<div class="wrap">
   	  <div class="inner">不定宽居中元素</div>
   	</div>
   	<style>
   		.wrap {
   		  float: left; /* 让父元素自适应子元素的宽度 */
   		  position: relative;
   		  left: 50%;   /*让父元素左边在祖先元素的中线上*/
   		}
   		.inner {
   		  position: relative;
   		  left: -50%; /*让居中元素，相对父元素向左移动一半*/
   		}	
   	</style>