CSS 居中 | zKing的学习乐园

摘要

CSS 居中这个问题已经是老生常谈了，但是还是需要做一下简单的总结

# 水平居中

# text-align:center 居中

只能让图片，按钮，文字等行内元素(display:inline|inline-block等)进行水平居中。
但要说明的是在IE6、7这两个浏览器中，它是能对任何元素进行水平居中的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    div{
      text-align:center;
    }
  </style>
</head>
<body>
  <div>
    <p>text-align:center 居中</p>
    <button>Button</button>
  </div>
</body>
</html>

# margin:auto 居中

具体来说就是把要居中的元素的 margin-left 和 margin-right 都设为 auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
需要注意的是，要居中的元素 width:100%; 时无效，此种方法无效

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      height: 200px;
      background: aquamarine;
    }
    .box {
      width: 200px;
      height: 100px;
      margin: 0 auto;
      background: aliceblue;
      /* 加上这两行可以垂直居中，但是需要容器的高度和本身的高度，才能这么做
      position: relative;
      top: 50px;
      */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

# 垂直居中

# line-height 居中

把文字的line-height设为文字父容器的高度
适用于只有一行文字的情况。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      height: 200px;
      background: aquamarine;
    }
    span{
      background: aliceblue;
      line-height: 200px;
    }
  </style>
</head>
<body>
    <div class="container">
      <span>line-height 居中</span>
    </div>
</body>
</html>

# 水平-垂直居中

# text-align + line-height

这种方式只对文字有用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      height: 200px;
      background: aquamarine;
      text-align: center;
    }
    span{
      background: aliceblue;
      line-height: 200px;
    }
  </style>
</head>
<body>
    <div class="container">
      <span>text-align  + line-height 居中</span>
    </div>
</body>
</html>

# display：table-cell 居中

可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格的居中特性
这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 400px;
      height: 200px;
      background: aquamarine;
    }
    .box {
      display: inline-block;
      width: 200px;
      height: 100px;
      background: aliceblue;
    }
/*     .box {
      display: block;
      margin: auto;
      width: 200px;
      height: 100px;
      background: aliceblue;
    } */
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

# 绝对定位居中

原理

通过"绝对定位元素"的 left 和 top的属性设为 50%,
然后使用一个负的 margin-left 和 margin-top 的值来把它拉回到居中的位置，这个负的 margin 值就取元素宽度和高度的一半。
需要注意的是：absolute 的直接脱离文档流，它是相对于最近的postion:relative/absolute的元素定位的，一直查询到body元素。可以看成是独立的存在

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background: aquamarine;
    }
    .box {
      width: 180px;
      height: 120px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -90px; /* 180/2 */
      margin-top: -60px;  /* 120/2 */
      background: aliceblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

上面的这种方法，需要知道被居中元素的宽高，但是还有两种绝对定位居中的方法，不需要知道宽高也可以实现居中

一种是使用 margin: auto;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background: aquamarine;
    }
    .box {
      width: 180px;
      height: 120px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      background: aliceblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

一种是使用 transform

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background: aquamarine;
    }
    .box {
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
      background: aliceblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">123</div>
  </div>
</body>
</html>

# 浮动元素居中

使用浮动元素居中的方法，可以不用知道要居中的元素的宽度，也能完成居中。

原理

把浮动元素相对定位到父元素宽度 50% 的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度
设置浮动元素里的子元素为相对定位，把那多出的自身一半的宽度拉回来，因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把 left 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

简单来说，浮动元素是用来做一个包裹层（wrapper），而 wrapper 里的子元素才是我们想要进行居中的元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      width: 400px;
      height: 200px;
      background: aquamarine;
    }
    .wrapper {   /* 这是一个浮动包裹层 */
      float: left;
      margin-left: 50%;
      line-height: 100%;   /* 这里设置 line-height 来垂直居中*/
    }
    .wrapper>button {  /* 这个子元素才是想要居中的元素 */
      position: relative;
      left: -50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrapper">
      <button>浮动元素居中</button>
    </div>
  </div>
</body>
</html>

# flex 布局居中

flex 是 CSS3 提出的专门用于布局的属性，用着是最舒服的布局了

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .container {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: aquamarine;
    }
    .box {
      width: 200px;
      height: 100px;
      background: aliceblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

# 奇淫技巧居中

# 使用 font-size

该方法只对IE6和IE7有效。(这个是从网上摘抄下来的。。。没有试验过)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .parent {
      font-size: 175.4px;
      /*font-size的值为这个元素的高度除以1.14得到的结果，这里就是200/1.14=175.4*/
      height: 200px;
      /*有一个固定的高度才能计算出相应 font-size的值*/
      width: 200px;
      height: 200px;
      border: 1px solid red;
      text-align: center;
    }
    .child {
      display: inline;
      vertical-align: middle;
      /*这句也是必须的*/
      zoom: 1;
      /*在ie6、7中让该元素变成一个inline-block元素，如果该元素本身就是一个inline或inline-b1ock元素，则不需要此步了*/
      /*让子元素恢复成正常的font-size*/
      font-size: 12px;
      background: #00F;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
</body>
</html>