一、已知宽高的浮动元素水平垂直居中对齐
效果：
样式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>
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>
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>
1 <div class="container">
2 <img src="watermelon.jpg" alt="">
3 </div>