css搞定所有垂直居中问题

单行文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #container{
          border: 1px solid #000;
          height: 300px;
          line-height: 300px;
      }
    </style>
<body>
   <div id="container">
        123123131
   </div>
</body>
</html>

多行文本+图片+任意大小的块

后面提供的3个例子中，只要把里面的#pic 的宽高去除，也是可以实现任意大小的div居中的。往里面填充任意的多行文字，也是可以居中的。

实际上，有这样的规律：

　　任意大小的div垂直居中 =》任意多行文字垂直居中 =》固定大小的div垂直居中 =》图片垂直居中

css3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container{
            border: 1px solid #000;
            height: 300px;

            /*display:-webkit-box;*/
            /*-webkit-box-align:center; !*上下对齐*!*/
            /*-webkit-box-pack:center;  !*左右对齐*!*/
            /*两种方式都可以居中*/

            display: flex;
            align-items: center;  /*垂直居中*/
            justify-content: center; /*水平居中*/
        }
        #pic{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
<body>
<div id="container">
    <br>
    33333333
    <br>
    <div id="pic"></div>
</div>
</body>
</html>

运行结果：

后者

外部容器 tableCell（IE6不支持） + middle

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #container{
          border: 1px solid #000;
          height: 300px;
          display: table-cell;
          vertical-align: middle;
      }
        #pic{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
<body>
   <div id="container">
        123123131
       <br>
       33333333
       <br>
        <div id="pic"></div>
   </div>
</body>
</html>

运行结果：

兼容ie6

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #container{
          border: 1px solid #000;
          height: 300px;
      }
        #pic{
            display: inline-block;
            width: 150px;
            vertical-align: middle;
            border: 1px solid #000;
        }
      #container:before{
          content:'';
          display: inline-block;
          height: 100%;
          width: 0;
          vertical-align: middle;
      }
    </style>
<body>
   <div id="container">
        <div id="pic" contenteditable>
            1231233 <br>
            1231233 <br>
            1231233 <br>
            1231233 <br>
            1231233 <br>
            1231233 <br>
        </div>
       1213
       <br>
   </div>
</body>
</html>

运行结果：

弹性布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container{
            border: 1px solid #000;
            height: 300px;
            justify-content:center;
            display: flex;
            flex-direction:column;
        }
        #pic{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
<body>
<div id="container">
    <br>
    33333333
    <br>
    <div id="pic"></div>
</div>
</body>
</html>

运行结果：（往里面再套一个容器，实现水平居中，而容器是垂直居中，就可以实现内容屏幕居中了）

在flex布局之后比较新和重要的布局方式：grid

参考：https://juejin.im/entry/5894135c8fd9c5a19507f6a1

<style>
    #root{
        display: grid;
        position: fixed;
        width: 100%;
        height: 100%;

        align-content:center;  /*垂直居中*/
        justify-content :center;  /*水平居中*/
    }
</style>
<body>
  <div id="root">
      1212313122
  </div>
</body>

水平居中（前者必须指定宽度）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container{
            border: 1px solid #000;
        }
        #pic{
            width: 100px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        /*#container{*/
            /*border: 1px solid #000;*/
            /*text-align: center;*/
        /*}*/
        /*#pic{*/
            /*display: inline-block;*/
            /*border: 1px solid #000;*/
        /*}*/
    </style>
<body>
<div id="container">
    <div id="pic">1</div>
</div>
</body>
</html>