CSS布局中的水平垂直居中
各位好，先说两句题外话。今天是我开通博客园的博客第一天，虽然我申请博客园的账号已经有一年半了，但是由于各种原因迟迟没有开通自己的博客。今天非常有幸开通博客，在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结。第一次写博客，可能会存在有的地方表述不是那么清晰明了还请各位多多见谅。
废话不多说了，下面进入主题：下面的例子父元素div 高600px 宽800px， 子元素div的高400px 宽300px;
- 知道父元素div的宽和高，子元素在父元素中水平垂直居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例1</title> 6 <style type="text/css"> 7 .parent{ 8 width: 800px; 9 height: 600px; 10 background-color: #bbbbc2; 11 overflow: hidden; 12 } 13 .child{ 14 width: 400px; 15 height: 300px; 16 margin: 150px 200px; 17 text-align: center; 18 font-size: 30px; 19 color: red; 20 background-color: #616161; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="parent"> 26 <div class="child">示例1</div> 27 </div> 28 </body> 29 </html>
简单解释一下，这种方法是设置子元素的外边距达到水平垂直居中的效果，效果图如下：
2. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法2）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>示例2</title> <style type="text/css"> .parent{ width: 800px; height: 600px; background-color: #bbbbc2; overflow: hidden; } .child{ width: 400px; height: 300px; margin: 150px auto; text-align: center; font-size: 30px; color: red; background-color: #616161; } </style> </head> <body> <div class="parent"> <div class="child">示例2</div> </div> </body> </html>
示例2的效果和示例1的效果一样，就不截图占用篇幅了，大家可以自己试一下；
3. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法3）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>示例3</title>
6 <style type="text/css">
7 .parent{
8 position: relative;
9 width: 800px;
10 height: 600px;
11 background-color: #bbbbc2;
12 overflow: hidden;
13 }
14 .child{
15 position: absolute;
16 width: 400px;
17 height: 300px;
18 left: 200px;
19 top: 150px;
20 text-align: center;
21 font-size: 30px;
22 color: red;
23 background-color: #616161;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="parent">
29 <div class="child">示例3</div>
30 </div>
31 </body>
32 </html>
简单解释一下，其中我将父元素采用相对定位，子元素采用绝对定位，子元素设置left 和 top 的距离即可达到水平垂直居中的效果
4. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法4）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>示例4</title>
6 <style type="text/css">
7 .parent{
8 position: relative;
9 width: 800px;
10 height: 600px;
11 background-color: #bbbbc2;
12 overflow: hidden;
13 }
14 .child{
15 position: absolute;
16 width: 400px;
17 height: 300px;
18 left: 50%;
19 top: 50%;
20 margin-top: -150px;
21 margin-left: -200px;
22 text-align: center;
23 font-size: 30px;
24 color: red;
25 background-color: #616161;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="parent">
31 <div class="child">示例4</div>
32 </div>
33 </body>
34 </html>
简单说一下，left和top采用百分比的方式取值，基数是对应父元素的宽和高。
5. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法5）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例5</title> 6 <style type="text/css"> 7 .parent{ 8 position: relative; 9 width: 800px; 10 height: 600px; 11 background-color: #bbbbc2; 12 overflow: hidden; 13 } 14 .child{ 15 position: absolute; 16 width: 400px; 17 height: 300px; 18 left: 50%; 19 top: 50%; 20 transform: translate(-50%,-50%); 21 text-align: center; 22 font-size: 30px; 23 color: red; 24 background-color: #616161; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="parent"> 30 <div class="child">示例5</div> 31 </div> 32 </body> 33 </html>
说一下，这种方法还是比较好的，translate(-50%,-50%)，这里使用到了2D转换，里面又用到了百分数，不过这个百分数是基于当前元素的宽和高的，这是我自己常用的一种方式
6. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法6）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例6</title> 6 <style type="text/css"> 7 .parent{ 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 width: 800px; 12 height: 600px; 13 background-color: #bbbbc2; 14 } 15 .child{ 16 width: 400px; 17 height: 300px; 18 text-align: center; 19 font-size: 30px; 20 color: red; 21 background-color: #616161; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="parent"> 27 <div class="child">示例6</div> 28 </div> 29 </body> 30 </html>
解释一下，这里面用到了flex布局，此处就先不详细讲解，后续再写专门的文章进行讲解。
7. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法7）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>示例7</title> 6 <style type="text/css"> 7 .parent{ 8 display: flex; 9 width: 800px; 10 height: 600px; 11 background-color: #bbbbc2; 12 } 13 .child{ 14 width: 400px; 15 height: 300px; 16 margin: auto; 17 text-align: center; 18 font-size: 30px; 19 color: red; 20 background-color: #616161; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="parent"> 26 <div class="child">示例7</div> 27 </div> 28 </body> 29 </html>
这里面也用到了flex布局，要听其中缘由，请听下回分解。
结束语：由于本人第一次写博客，多有不足，还请各位大神多多指教，谢谢！
flex布局参考文章：
阮一峰的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html