元素，单行文字或多行文字，图片 之 水平垂直居中的方法大全及例子分析

1.元素水平垂直居中

利用CSS进行元素的水平居中，比较简单，行内素设置其父元素的text-align center，块级元素设置其本身margin为0 auto即可。而垂直居中要按情况而定。

//方法一：
<div class="parent" style="width:200px;height:200px;background:#C53B3B;position:relative;">
     <div class="child" style="width:40%;height:20%;background:#3FC430;position:absolute;left:50%;top:50%;margin:-10% 0 0 -20%">benxiaodai</div>
</div>

//方法二：
<div class="parent" style="width:200px;height:200px;background:#C53B3B;position:relative;">
     <div class="child" style="width:40%;height:20%;background:#3FC430;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;">benxiaodai</div>
</div>

//方法三：
<div class="parent" style="height:200px;background:#C53B3B">
     <div class="floater" style="float:left;width:100%;height:50%;margin-bottom:-50px;"></div>
     <div class="child" style="clear:both;width:100px;height:100px;margin:0 auto;">benxiaodai</div>            
</div>
 

2.文字水平垂直居中

a.单行文字水平垂直居中

//方法一：
<div style="height:40px;text-align:center;line-height:40px;background:red">
     单行文字水平垂直居中
</div>

//方法二：
<div style="width:100px;height:100px;background:red;text-align:center;display:table-cell;vertical-align:middle">
     单行文字水平垂直居中
</div>

b.多行文字水平垂直居中

//方法一：
<div style="width:100px;height:100px;background:red;text-align:center;display:table-cell;vertical-align:middle">
     多行文字水平垂直居中，多行文字水平垂直居中，多行文字水平垂直居中。
</div> 

//方法二：

<div style="width:200px;height:300px;display:table;background:blue;/*table-layout:fixsed;*/">
	//设置此元素时，父元素的宽度由子元素快读的总和决定        
        <div style="width:100px;text-align:center;background:red;display:table-cell;vertical-align:middle">
		多行文字水平垂直居中，多行文字水平垂直居中，多行文字水平垂直居中。
	</div>
	<div style="width:100px;text-align:center;background:red;display:table-cell;vertical-align:middle">
		多行文字水平垂直居中，多行文字水平垂直居中，多行文字水平垂直居中。
	</div>
	<div style="width:100px;text-align:center;background:blue;display:table-cell;vertical-align:middle">
		多行文字水平垂直居中，多行文字水平垂直居中，多行文字水平垂直居中。
	</div>
</div>
 

3.图片水平垂直居中

//方法一：
<div class="a" style="width:600px;height:500px;background:red;text-align:center;line-height:500px">
      <img src="golf.jpg" alt=""  style="vertical-align:middle;">
</div>

//方法二：
<div class="a" style="width:600px;height:500px;background:red;text-align:center;">
      <img src="golf.jpg" alt=""  style="vertical-align:middle;">
      <span style="width:0;height:100%;display:inline-block;vertical-align:middle;"></span>
</div>

//方法三：
<div style="width:100px;height:500px;text-align:center;background:red;display:table-cell;vertical-align:middle">
      <img src="golf.jpg" alt="" style="vertical-align:middle;/*此方法中得这个属性设置可以省去*/">
</div>

例子：使<span>,<input>,<img>元素在div中，水平对齐，垂直居中。

html:
<div>
   <span>hello world!</span>
   <input type=text/ value="1">
   <img src="#"/>
</div>
css:
   div{height:40px;line-height:40px;}
   div input{vertical-align:middle;}
   div img{vertical-align:middle}
 

总结：vertical-align作用于行内元素（input，img等），使其水平对齐，垂直居中！

PS：猿猿们有什么其他的建议可以留言给我呦！

补充：1.元素水平垂直居中

//方法四