居中布局

1.1 水平居中

方法1

.parent{

text-align: center;

}

.child{

display: inline-block;

}

方法2

.child{

display: table;

margin: 0 auto;

}

方法3

.parent{

position: relative;

}

.child{

position: absolute;

left: 50%; 

transform: translateX(-50%);

}

方法4

.parent{

display: flex;

justify-content: center;

}

.child{ 

margin: 0 auto;

}

1.2垂直居中

方法一

.parent{

display: table-cell;

vertical-align: middle;

}

方法二

.parent{

position: relative;

}

.child{   

position: absolute;

top: 50%;

transform: translateY(-50%);

}

方法三

.parent{

display: flex;

align-items: center;

}

其他

1.parent{

display:table-cell;

vertical-align:middle;

height:20px;

}

 2.parent{

display:inline-block;

vertical-align:middle;

line-height:20px;

}

1.3水平 垂直都居中

 方法一

  .parent{        text-align: center;

display: table-cell;

vertical-align: middle;}

.child{display: inline-block;}

 方法二

              .parent {   position: relative}

              .child {  position: absolute;

                      left: 50 % ; top: 50 % ;

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

  方法三

 .parent {

    display: flex;

   justify - content: center;

   align - items: center;

}