CSS水平居中与垂直居中的总结

作者: zh_yang | 来源:发表于2017-08-31 10:40 被阅读0次

CSS实现居中的方法着实不少，在工作中也比较容易实现，本文旨在归纳各种居中的方法，对各种方法有比较清晰的认识，达到在实际工作中 “ 对方抓药 ” 的目的。

工作中有时水平居中、垂直居中会同时实现，本次分开介绍。

水平居中

行内元素水平居中

给其父元素设置： text-align:center

这里指的是在行内元素不转化为块级元素的情况下，查了好多资料都是这一种方法，不过确实好用，这里父元素应为块级元素。
注意：

使用display、position行内元素特性会发生改变（虽然position设置relative没有改变行内元素特性，但是行内元素宽度不确定，也不能准确实现居中）

transform只适用与块级元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 150px;
      height: 150px;
      background: yellow;
      text-align: center
    }
    span {
      background: blue;    
    }
  </style>
</head>
<body>
  <div class="d1">　　　　　//块级元素
    <span>hello</span>　　　　　//行内元素
  </div>
</body>
</html>

测试01.PNG

块级素水平居中

1.设置 margin: 0 auto;

仅适用于块级元素（block），不适用于行内块元素（inline-block）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
    }
    span {
      width:100px;
      background: blue;
      margin: 0 auto;
      display:block;　　　　　//改为inline-block居中失效
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello
      </span>
  </div>
</body>
</html>

测试02.PNG
2.margin: 0 auto;结合position。

必须设置 left: 0; right: 0;

对于块级元素（block）直接margin: 0 auto;就搞定了，当position同时也进行了设置时，块级元素（block）和行内块（inline-block）水平居中都能实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
      position: relative;
    }
    span {
      width:100px;
      background: blue;
      position: absolute;
      top:0;
      left:0;
      right:0;
      margin: 0 auto;
      /* display: inline-block; */　　　//设置了position: absolute，默认具有了行内块特性
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello
      </span>
  </div>
</body>
</html>

测试03.PNG
3.transform结合position。

原理是利用positon移动元素左上角至父元素水平中间位置，再利用transform把元素水平中心和父元素水平中心对齐，因为两者百分比参考对象不同，所以必须两次操作。

这里适用块级元素（block）和行内块（inline-block），不需要知道快读，若已知宽度也可用其他方法。

这里 position 不能设置 relative，虽然它对行内元素有效，但会导致transform 失效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
      position: relative;
    }
    span {
      background: blue;
      position: absolute;
      left:50%;　　　　//百分比相对于父元素
      transform: translateX(-50%);　　　　//百分比相对于自身
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello world
      </span>
  </div>
</body>
</html>

测试04.PNG
4.display:flex/inline-flex

将父元素设置为弹性伸缩盒，通过设置子元素的排列实现水平居中。

justify-content 设置子元素在主轴方向上中间对齐，实现水平居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
      display: flex;
      justify-content: center;
    }
    span {
      background: blue;
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello world
      </span>
  </div>
</body>
</html>

测试05.png

也可以用flex-direction改变主轴方向，然后用align-items或者align-self在侧轴上居中，效果一样。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
      display: flex;
      flex-direction: column;
      align-items:center;
    }
    span {
      background: blue;
      width:100px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello world
      </span>
  </div>
</body>
</html>

测试06.png
5.若width固定，使用绝对定位方式, 以及负值的margin-left

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding： 0；
    }
    .d1 {
      width: 250px;
      height: 150px;
      background: yellow;
      position: relative;
    }
    span {
      background: blue;
      width:100px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
    }
  </style>
</head>
<body>
  <div class="d1">
      <span>
        hello world
      </span>
  </div>
</body>
</html>

测试07.png
6.不推荐
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}
//fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中,
 目前只支持Chrome 和 Firefox浏览器.

垂直居中

行内元素垂直居中

单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    div {
      background: yellow;
      width: 300px;
      height: 200px;
    }
    span {
      background: blue;
      line-height: 200px;
    }
  </style>
<body>
  <div>
    <span>hello world</span>
  </div>
</body>
</html>

测试08.png

图片垂直居中，设置上下padding（父元素高估不设置）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p {
      border: 1px solid;
      
    }
    img {
      height: 100px;
      vertical-align: middle;　　　//不加这个上下会有偏差
      padding:20px 0;
    }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试09.png

图片垂直居中，下边这种方法会有一定偏差（父元素高估不设置）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p {
            border: 10px solid black;
            line-height: 210px;
            text-align: center;
        }

        img {
            height: 200px;
            vertical-align: middle;
        }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试10.png

图片垂直居中，图片作为背景。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p {
        height: 300px;
        width: 300px;
        border: 1px solid;
        padding:20px;
        }

    img {
          width:100%; 
          height: 100%;
          display:block;
          background:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2206324925,1265061622&fm=200&gp=0.jpg') no-repeat;
          background-size:cover;
        }
  </style>
<body>
  <p>
    <img src="" alt="">
  </p>
</body>
</html>

测试11.png

块级元素垂直居中

1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
行内元素可可以转换为inline-block实现居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p {
        height: 200px;
        width: 300px;
        border: 1px solid;
        }

    p::after,img {
          width:100px; 
          display:inline-block;
          vertical-align: middle;
        }
    p::after {
      content: '';
      height: 100%;
    }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试12.png
2.用 vertical-align 属性

vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    .container {
        display: table;
        height: 200px;
        width: 300px;
        border: 1px solid #000;
        }

    span {
        display: table-cell;
        height:100px;
        vertical-align: middle;
          
        }
  </style>
<body>
  <div class="container">
    <span>hello</span>
  </div>
</body>
</html>

测试13.png
3.使用弹性盒子，设置子元素在侧轴或主轴的排列

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p { 
        display:flex;
        /* align-items: center; */
        height: 200px;
        width: 300px;
        border: 1px solid;
        }

    img {
        width:100px; 
        display:inline-block;
        align-self:center;
        }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试14.png
4.transform+position

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p { position: relative;
        height: 200px;
        width: 300px;
        border: 1px solid;
        }

    img {
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        width:100px; 
        display:block;
        }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试15.png
5.position+margin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p { 
        position: relative;
        height: 200px;
        width: 300px;
        border: 1px solid;
        }

    img {
        display:inline-block;
        height:100px;
        position: absolute;
        top:50%;
        margin-top:-50px; 
        }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试16.png
6.margin: auto 0;结合position。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    p { 
        position: relative;
        height: 200px;
        width: 300px;
        border: 1px solid;
        }

    img {
        display:inline-block;
        height:100px;
        position: absolute;
        top:0;
        bottom:0;
        margin: auto 0;
        }
  </style>
<body>
  <p>
    ![](https://img.haomeiwen.com/i6828981/5e462e315494397c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </p>
</body>
</html>

测试17.png

CSS水平居中与垂直居中的总结

水平居中

行内元素水平居中

块级素水平居中

垂直居中

行内元素垂直居中

块级元素垂直居中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客