css實現div水平垂直居中
阿新 • • 發佈：2019-09-10
中秋快到了，祝大家中秋快樂。
平時大家寫bug過程中肯定會遇到讓div框水平或者垂直居中，然而有時候能居中，有時候不能居中。我把平時遇到的一些方法寫出來，如果對你有用，那便是晴天。
1、text-align: center;
text-align: center;
這個是最簡單的了，實現文字水平居中。
2、margin： 0 auto;
0為上下邊距為0，auto為左右邊距自適應，於是變實現了水平居中。高度固定時，加上line-height就能實現垂直居中。程式碼如下：
1 margin: 0 auto; 2 height: 100px; 3 line-height: 100px;<!-- 高度固定時使用 -->
3、子元素基於父元素實現居中
採用絕對定位，使子div框定位跟著父div框，再讓子div框左右邊距自適應，於是邊形成了水平垂直居中。
效果如圖1所示。
圖1
程式碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .parent {
10 width: 200px;
11 height: 200px;
12 border: 1px red solid;
13 margin:0 auto;
14 position: relative
15 }
16 .child {
17 width: 100px;
18 height: 100px;
19 border: 1px red solid;
20 position:absolute;
21 left: 0;
22 right: 0;
23 top:0;
24 bottom:0;
25 margin-left: auto;
26 margin-right: auto;
27 margin-top:auto;
28 margin-bottom:auto;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="parent">
34 <div class="child">
35 </div>
36 </div>
37 </body>
38 </html>4、彈性盒子實現居中
1 display: flex; 2 align-items: center; /*定義父元素的元素垂直居中*/ 3 justify-content: center; /*定義子元素的裡的元素水平居中*/
還有使用absolute與transform配合實現居中的，看小夥伴自己選擇了。
本文到這裡就結束了，中秋快樂，有緣再