水平、垂直布局 | 黑豆的博客

# 水平居中

# 行内元素

针对行内元素，可以给父级设置 text-align:center; 来实现水平居中的效果。

<!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>Document</title>
  <style>
    .container {
      background-color: red;
      text-align: center;
    }
    span {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <span>1111</span>
  </div>
</body>
</html>

运行效果如下

# 宽度确定的块级元素

给自身设置 margin: 0 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>宽度确定的块级元素水平居中</title>
  <style>
    .container {
      background-color: red;
    }
    .box {
      width: 200px;
      background-color: orange;
      margin: 0 auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1111</div>
  </div>
</body>
</html>

# 宽度未知的块级元素

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>Document</title>
  <style>
    .container {
      background-color: red;
      display: flex;
      justify-content: center;
    }
    .box {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">box</div>
  </div>
</body>
</html>

绝对定位+transform，translateX可以移动本身元素的50%。

<!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>Document</title>
  <style>
    .container {
      height: 200px;
      position: relative;
      background-color: red;
    }
    .box {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">transform</div>
  </div>
</body>
</html>

效果如下：

display：inline-block

<!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>Document</title>
  <style>
    .container {
      text-align: center;
      background-color: red;
    }
    .box {
      display: inline-block;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">box</div>
  </div>
</body>
</html>

效果如下：

# 垂直居中

line-height 可以用于设置文字居中

.box {
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}

display: flex

TIP

要居中元素的高度可以未知
低版本IE存在兼容性问题

<!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>宽度未知的块级元素</title>
  <style>
    .container1 {
      display: flex;
      /* 垂直居中 */
      align-items: center;
      /* 水平居中 */
      justify-content: center;
      height: 200px;
      background-color: red;
    }
    .box1 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container1">
    <div class="box1">flex</div>
  </div>
</body>
</html>

效果如下：

绝对定位 + margin: auto;

TIP

要居中元素的高度必须已知

<!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>
    .container1 {
      position: relative;
      height: 200px;
      background-color: red;
    }

    .box1 {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      right: 0;
      /* 垂直居中主要是设置 top 和 bottom */
      top: 0;
      bottom: 0;
      /* 水平居中 */
      /* margin: 0 auto; */
      /* 垂直居中 */
      /* margin: auto 0; */
      /* 水平、垂直居中 */
      margin: auto;
      background: blue;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="container1">
    <div class="box1">绝对定位 + margin: auto;</div>
  </div>
</body>

</html>

运行效果如下：

块级元素：绝对定位（需要提前知道尺寸）

<!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>块级元素：绝对定位（需要提前知道尺寸）</title>
  <style>
    .container {
      position: relative;
      background-color: red;
      height: 200px;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -50px;
      margin-left: -50px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

运行效果如下:

6. 块级元素：绝对定位 + 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>Document</title>
  <style>
    .container {
      position: relative;
      height: 200px;
      background-color: red;
    }

    .box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box">块级元素：绝对定位 + transform</div>
  </div>
</body>

</html>

运行效果如下：

上面只是简单列举了一些常用的水平、垂直居中方法，更多的方法可以查看下面这篇博客 CSS设置居中的方案总结-超全 (opens new window)。

← CSS盒模型 BFC →