3.（中级）CSS让元素居中方法

一、水平居中

1、行内元素

text-align:center;

2、块级元素

margin:0 auto;

3、多行块级元素

display: flex;

justify-content:center;

二、垂直居中

1、单行文本

line-height:;

2、多行文本

（1）padding:;

（2）table中，使用vertical-align:middle;

3、块级元素

方法一

.parent{

   position:relative;

}

.child{
   position:absolute;
   top:50%;
   transform:translateY(-50%);

}

方法二：使用flex

display: flex;

align-content:center;

方法三：基于视口单位

.child{
   margin:50vh auto 0
   transform:translateY(-50%);

}

三、水平垂直同时居中

.parent{

   position:relative;

}

.child{
   position:absolute;
   top:50%;

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

}