前端水平垂直居中的方式(总结)：

来源：cnblogs　　作者：星空的轨迹　　时间：2021/4/12 9:37:49　　对本文有异议

1.仅水平居中：

1.1行内元素水平居中：text-align

 1 <head>
 2   <style>
 3     #box {
 4       width: 200px;
 5       height: 200px;
 6       border: 1px solid red;
 7       /* 行内元素水平 */
 8       text-align: center;
 9     }
10   </style>
11 </head>
12 <body>
13   <div id="box">
14     <span>我要居中</span>
15   </div>
16 </body>
17 </html>

View Code

1.2块级元素水平居中：margin

<head>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #box2 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">我是块元素，我想水平居中</div>
  </div>
</body>
</html>

View Code

2.仅垂直居中：

2.1行内元素垂直居中(仅限于单行文本)：line-height

<head>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
      line-height: 300px;
    }
  </style>
</head>
<body>
  <div id="box1">
    我是子元素
  </div>
</body>
</html>

View Code

3.垂直水平居中：

3.1行内元素：text-align + line-height

 1 <head>
 2   <style>
 3     #box1 {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       line-height: 300px;
 8       text-align: center;
 9     }
10   </style>
11 </head>
12 <body>
13   <div id="box1">
14     我是子元素
15   </div>
16 </body>
17 </html>

View Code

效果：

3.2.定位+transform

优点：元素宽高改变的时候不要再计算

缺点：有兼容性问题

 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       position: relative;
 8     }
 9     .child {
10       width: 100px;
11       height: 100px;
12       background-color: green;
13       position: absolute;
14       left: 50%;
15       top:50%;
16       transform: translate(-50%,-50%);
17     }
18   </style>
19 </head>
20 <body>
21   <div id="parent">
22     <div class="child">子元素</div>
23   </div>
24 </body>
25 </html>

View Code

效果：

3.3定位+margin

缺点：不够动态，宽高改变需要程序计算

 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       position: relative;
 8     }
 9     .child {
10       width: 100px;
11       height: 100px;
12       background-color: green;
13       position: absolute;
14       left: 50%;
15       top:50%;
16       margin-left: -50px;
17       margin-top: -50px;
18     }
19   </style>
20 </head>
21 <body>
22   <div id="parent">
23     <div class="child">子元素</div>
24   </div>
25 </body>
26 </html>

View Code

效果图：

3.4弹性盒模型：

 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       display: flex; /* 父元素设置flex*/
 8       align-items: center; /* 垂直居中 */
 9       justify-content: center; /* 水平居中 */
10     }
11     .child {
12       width: 100px;
13       height: 100px;
14       background-color: green;
15     }
16   </style>
17 </head>
18 <body>
19   <div id="parent">
20     <div class="child">子元素</div>
21   </div>
22 </body>
23 </html>

View Code

效果：

3.5.display:table实现(不常用)：

 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       display: table;
 8       text-align: center;
 9     }
10     .child {
11       display: table-cell;
12       background-color: green;
13       vertical-align: middle;
14     }
15   </style>
16 </head>
17 <body>
18   <div id="parent">
19     <div class="child">子元素</div>
20   </div>
21 </body>
22 </html>