DIV水平居中实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV水平居中</title>
 <style>
   .parent { width:980px;height:300px;margin:0 auto;text-align:center;background-color:#999;}
   .children {display:inline-block;width:100px;height:250px;}
   /**+ html .children { display:inline;zoom:1;}
   * html .children { display:inline;zoom:1;}*/
   
   .div1{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div1:hover{
width:300px;
}
.div2{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div2:hover{
width:300px;
}
.div3{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div3:hover{
width:300px;
}
.div4{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div4:hover{
width:300px;
}
   
  </style>
</head>
<body>
<div class="parent">
   <div class="children div1" style="background-color:green;"></div>
   <div class="children div2" style="background-color:red;"></div>
   <div class="children div3" style="background-color:yellow;"></div>
   <div class="children div4" style="background-color:blue;"></div>
  <!-- <div class="children" style="background-color:green;"></div>-->
   <!--<div class="children" style="background-color:red;"></div>
   <div class="children" style="background-color:yellow;"></div>-->
  <!-- <div class="children" style="background-color:blue;"></div>
   <div class="children" style="background-color:green;"></div>-->
</div>
</body>
</html>

wKiom1YfFQey9VveAAGfZLm3Ar4850.jpg