SunJianXu Blog
sunjianxu
2020-08-11

水平垂直居中对齐的方案

# 已知宽高

  1. 绝对定位 + margin:auto
  2. 绝对定位 + margin
  3. 绝对定位 + calc

# 绝对定位 + margin:auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位+margin:auto</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background: cornflowerblue;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 绝对定位 + margin

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位+margin</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background: cornflowerblue;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 绝对定位 + calc

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位+calc</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      .item {
        width: 100px;
        height: 100px;
        background: cornflowerblue;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 不知宽高

  1. 绝对定位+transform
  2. flex 布局
  3. flex+margin auto
  4. grid 网格布局
  5. grid margin auto
  6. grid + place-content(是 justify-content 和 align-content 的缩写形式)
  7. line-height
  8. table-cell
  9. table
  10. writing-mode

# 绝对定位+transform

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位+transform</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background: cornflowerblue;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# flex 布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid 网格布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item {
        width: 100px;
        height: 100px;
        background: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# flex+margin auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex margin-auto</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: -webkit-flex;
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        background: rebeccapurple;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">25455</div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# grid 网格布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid 网格布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: grid;
        justify-content: center;
        align-content: center;
      }
      .item {
        width: 100px;
        height: 100px;
        background: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# grid margin auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid margin-auto</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: grid;
      }
      .item {
        width: 100px;
        height: 100px;
        background: rebeccapurple;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">25455</div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# grid + place-content(是 justify-content 和 align-content 的缩写形式)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid + place-content</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: grid;
        place-content: center;
        justify-content: ;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# line-height

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        line-height: 100vh;
        text-align: center;
      }
      .item {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
        vertical-align: middle;
        line-height: initial;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">222</div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# table-cell

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table-cell</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .item {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        width: 100vw;
        height: 100vh;
      }
      .box {
        text-align: center;
      }
      .item {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td class="box">
            <div class="item">文辞</div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# writing-mode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>writing-mode</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrapper {
        writing-mode: vertical-lr;
        text-align: center;
        width: 100vw;
        height: 100vh;
      }
      .box {
        writing-mode: horizontal-tb;
        display: inline-block;
        text-align: center;
        width: 100%;
      }
      .item {
        display: inline-block;
        margin: auto;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <div class="item">item</div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 总结

# 已知宽高

  1. 绝对定位 + margin:auto
  2. 绝对定位 + margin
  3. 绝对定位 + calc

# 不知宽高

  1. 绝对定位+transform
  2. flex 布局
  3. flex+margin auto
  4. grid 网格布局
  5. grid margin auto
  6. grid + place-content(是 justify-content 和 align-content 的缩写形式)
  7. line-height
  8. table-cell
  9. table
  10. writing-mode
编辑 (opens new window)
上次更新: 2021/08/30 10:29:40
最近更新
01
解决 ios10 及以上 Safari 无法禁止缩放的问题
 08-31
02
获取页面视口大小
 08-21
03
数组扁平化
 08-20
更多文章>
Theme by Vdoing | Copyright © 2019-2021 SunJianXu | MIT License
×