垂直居中

0.display: flex;

父级              display: flex;text-align: center;

子标签        margin: auto;

1. display: flex;

    justify-content: center;

    align-items: center;

2：display: -webkit-box;       （父级标签里添加）

    -webkit-box-pack:center;

    -webkit-box-align:center;

    -webkit-box-orient: vertical;

    text-align: center

3.display: table-cell;    vertical-align:middle; 

此元素会作为一个表格单元格显示 ,,,,,,把此元素放置在父元素的中部(还有 vertical-align:sub; 垂直对齐文本的下标。)

1.个块级标签包行内标签

父级标签样式  ,淡然还是要设置宽高的，不然怎么体现出来 垂直居中

    display: table-cell;

    vertical-align: middle;

    text-align: center; 

2.个块级标签包行块级元素（块级元素设置了宽高）

上面的代码就不够了， 里面的块级元素 要加上 margin: 0 auto;    看图大家应该都明白了

4.绝对定位和负边距

父标签加上      position:relative;

子标签            

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

其实就是先用margin移出（父级）身长，高的一半，在用定位

5.绝对定位和0

父标签加上      position:relative;

子标签       

    width: 139px;

    height: 139px;

    overflow: auto;

    margin: auto;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    通过margin:auto     和    top,left,right,bottom都设置为0实现居中

6.translate    (不常用)

父标签加上      position:relative;

子标签   

position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

写代码当然是越简单越少，所以上面由简单到复杂 往下写的