居中布局总结

一.水平居中

1.inline-block+text-align

//1. 如果需要居中的元素为块级元素
display: inline-block; //是元素变成行内块元素 
//2.在父元素上添加样式
text-align: center;

2.table+margin

//1.
display: table; //在没有给当前元素设置width:100%时 table的宽度就只是内容的宽度
//2.
margin: 0 auto; //margin的值为一个的时候代表上下左右的外边距都为那个值；有两个值时，前者代表上下，后者代表左右；有三个值时，分别为上、左右、下；有四个值时，为上、右、下、左（内边距padding也是这样）

3.absolute+transform

//父元素：
            position: relative
//子元素：
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          

4.flex+justify-content

//在父元素上设置
            display: flex;
            justify-content: center;

5.flex+margin

//父元素：
    display:flex;
//子元素：
    margin：0 auto;

二.垂直居中

1.table-cell+vertical-align

//父元素
    display: table-cell;
    vertical-align: middle;

2.absolute+transform

//父元素：
            position: relative
//子元素：
            position: absolute;
            top: 50%;
            transform: translatey(-50%);

3.flex+align-items

//父元素
    display: flex;
    align-items:center;

三.垂直水平居中

1.inline-block+text-align+table-cell+vertical-align

//父元素
text-align:center;
display:table-cell;
vertical-align:middle;
//子元素
display:inline-block;

2.absolute+transform

//父元素：
            position: relative
//子元素：
            position: absolute;
            top: 50%;
            left: 50%
            transform: translate(-50%,-50%);

3.flex+align-items+justify-content

//父元素
    display:flex;
    align-items:center;
    justify-content:center;