CSS布局———垂直水平居中

前面讲了float,transptain,flex,grid等等方法做布局，此时对一个页面，作出一个大体的布局已经没有任何问题了，但是有个问题，垂直居中，我觉得应该总结一下各种垂直水平居中的方法。

---

首先是简单的水平居中，我自己能总结的是3种方法：

内联元素：

• 牢牢记住，管是inline-block,还是inline，全部一股脑用text-align:

html:
<div class="span">
        <span class="inline-block">我要上天</span>
        <span >我要下海</span>
    </div>
 css:
 .span{
            text-align: center;
        }
        .span .inline-block{
            display: inline-block;
        }

块级

• div本身定宽(基本上都是定宽的)：用margin

html:
	<div class="show"></div>
css:
.show{
            height: 100px;
            width: 100px;
            border: 1px solid red;
            margin-left: auto;
            margin-right: auto;
        }

效果如图：

• flex大法：

html:
<div class="flex">
        <div class="items"></div>
        <div class="items"></div>
    </div>
css:
.flex{
            display: flex;
            justify-content: center;
        }
        .flex .items{
            height: 100px;
            width: 100px;
            border: 1px solid red;
        }

---

然后是比较复杂的垂直居中，这边总共给出七种方法:

内联样式

• 行高：line-height （仅限单行） 这玩意其实很深，很多时候如果行高比字体要小还容易出错，建议用在行高远比当前字体要高的情况下，而且在面对img这种内联元素的时候，还要记得加上vertical-align: bottom;来把图片下面的多余部分去掉

html:
<div class="line-height">
        <span>这边是同类型的行高对比</span>
    </div>
css:
.line-height{
            font-size: 12px;
            line-height: 40px;
            border: 1px solid red;
        }

• 多行的行内元素，就不能用行高了，此时换用flex大法

块级

• transform+position:

html:
   <div class="container">
       <div></div>
   </div>
css:
.container{
           height: 500px;
           width: 500px;
           border: 1px solid;
       }
.container div{
           height: 100px;
           width: 100px;
           border: 1px solid red;
           position: relative;
           top: 50%;
           transform: translateY(-50%);
       }

• position:

html:
<div class="container">
       <div></div>
   </div>
css:
.container{
           height: 500px;
           width: 500px;
           border: 1px solid;
           position: relative;
       }
       .container div{
           height: 100px;
           width: 100px;
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           margin: auto;
           background-color: red;
       }

• table法：因为vertical对于表格是有效的，所以换成表格来写垂直居中也应该能成功

html:
<div class="parent">
   <div class="child">hello</div>
</div>
css:
.parent {
           height: 100px;
           width: 100px;
           display: table;
           border: 1px solid red;
       }

  		.child {
           display: table-cell;
           vertical-align: middle;
       }

• 上下padding：事实上，很多时候我们如果把上下宽度写死了，那么往往代码就会出现无限的bug,于是我们用上下padding撑开

html:
<div class="continer">
       <div>我要上天</div>
   </div>
css:
.continer{
           border: 1px solid red;
       }
       .continer div{
           padding: 100px 0;
       }

• grid大法

html:
<div class="container">
       <div></div>
   </div>
css:
.container{
           height: 300px;
           width: 300px;
           border: 1px solid;
           display: grid;
           grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
       }
       .container div{
           height: 100px;
           width: 100px;
           background-color: red;
           grid-area: 2 /2;
       }