CSS布局-让一个盒子水平垂直居中的几种方法

Posted on   |   In   |     |  

    实现问题的方式永远不只一种，这里也是根据一个经常会用到的需求来做一个小结，下面列出了5种能够让一个盒子水平垂直居中的方法，也是在提醒自己在工作当中要随时记得发散思维，不要太固化，提高自己灵活解决问题的能力，问题很简单，就是实现如图效果：
盒子居中.png
下面上代码：

方法一、最传统的方法

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>居中问题</title>
  <style>
  .outer {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: orange;
  }
  .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>

大体实现思路就是先设置父盒子为相对定位，然后设置子盒子为绝对定位，设置其left和top都为50%，然后再设置margin-top和margin-left为它们各自高和宽的一半即可，这一个方法不足的地方是必须需要先知道子盒子的宽高，设置了居中还得靠js来获取就有点兴师动众了，看下面的方法

方法二、巧妙的运用了margin:auto

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>居中问题</title>
    <style>
    .outer {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: orange;
    }

    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

大体实现思路就是先设置父盒子为相对定位，然后设置子盒子为绝对定位，设置其left、right、top、bottom都为0，再设置margin：auto即可；

方法三、利用C3属性transform

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>居中问题</title>
  <style>
  .outer {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: orange;
  }
  .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background-color: skyblue;

  }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner"></div>
</div>
</body>
</html>

这一点实现思路跟方法一差不多，但是弥补了方法一的缺陷，不需要提前知道子盒子的宽高了，兼容性这块兼容主流的，当然ie6/7还是需要传统解决的

方法四、利用flex布局

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>居中问题</title>
    <style>
    .outer {
        width: 300px;
        height: 300px;
        background-color: orange;
        margin: 50px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

大体实现思路就是只需要设置父盒子display为flex，然后再设置其
justify-content: center;（主轴方向对齐，可以调整子元素在主轴方向上的对齐方式）
align-items: center;（定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式）;
扩展性较强，移动端常用；

方法五、flex布局结合margin:auto

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>居中问题</title>
    <style>
    .outer {
        width: 300px;
        height: 300px;
        background-color: orange;
        display: flex;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin: auto;
    }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

大体实现思路也是先设置父盒子display：flex，然后再设置子盒子margin：auto即可,扩展性较强，移动端常用；

附加一个图片水平垂直居中

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片水平居中</title>
    <style>
    .outer {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    img {
        width: 100px;
        height: 100px;
    }
    </style>
</head>

<body>
    <div class="outer">
        <img src="demo.jpg" alt="">
    </div>
</body>

</html>

主要是指定父盒子为display: table-cell;然后设置text-align: center;vertical-align: middle;即可

结语

当然可能还有一些方式可以实现，这里只是记录下，有需要的朋友可以参考！