一、已知宽高的浮动元素水平垂直居中对齐
效果：
样式CSS:
1 <style> 2.parent{3 position:relative; 4 border:2px solid #0f0; 5} 6.child{7 float:left; 8 background-color:#6699ff; 9 width:200px;10 height:200px;11 border:2px solid #f00;12 position:absolute;13 top:50%;14 left:50%;15 margin-top:-100px;16 margin-left:-100px;17}18 </style>
模板HTML:
1 <body>2<div class="parent">3 <div class="child"></div>4</div>5 </body>
二、未知宽高的浮动元素水平垂直居中对齐
效果：
样式CSS：
1 <style> 2.parent{3 position:relative; 4 border:2px solid #0f0; 5} 6 7.child{8 float:left; 9 background-color:#6699ff;10 width:260px;//元素宽高随便设定11 height:260px;12 border:2px solid #f00;13 14 margin:auto;15 position:absolute;16 top:0;17 left:0;18 bottom:0;19 right:0;20}21 </style>
模板HTML：
1 <body>2<div class="parent">3 <div class="child"></div>4</div>5 </body>
三、图片的水平垂直居中
1.效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>图片垂直居中</title> 6 </head> 7 <body> 8 <style> 9.test_box {10 width: 200px;11 height: 200px;12 overflow: hidden;13 text-align: center;14 font-size: 0;15 border: 1px solid #ff0000;16}17 18.test_box .hook {19 display: inline-block;20 width: 0;21 height: 100%;22 overflow: hidden;23 margin-left: -1px;24 font-size: 0;25 line-height: 0;26 vertical-align: middle;27}28 29.test_box img {30 vertical-align: middle;31 border: 0 none;32}33 </style>34 <div class="test_box">35<span class="hook"></span>36<a href="#" target="_blank"><img src="22.jpg" alt=""/></a>37 </div>38 39 </body>40 </html>
2.效果：
样式CSS:
1 <style> 2 .container{3 display:table-cell; 4 text-align:center; 5 vertical-align:middle; 6 width:500px; 7 height:300px; 8 border:2px solid #f00; 9 }10 11 img{12 width:200px;13 height:200px;14 border:2px solid #0f0;15 }16 17 </style>
模板HTML:
1 <div class="container">2<img src="watermelon.jpg" alt="">3 </div>
