css水平垂直居中问题

水平居中：

• 行内元素：text-align:center;
• 块级元素：magin:0 auto;
• 子元素设置：position:absolute;  left:50%;  transform:translateX(-50%);
• 父元素设置：display:flex;  justify-content:center;

 

垂直居中：

• line-height:height;
• 子元素设置：position:absolute;  top:50%;  transform:translateY(-50%);
• 父元素设置：display:flex; align-items:center;

水平垂直居中：

• display:flex; justify-content:center; align-items:center;
• .parent{position:relative; }   .children{position:absolute; width:200px; height:100px; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}
• .parent{position:relative;}     .children{position:absolute; width:200px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%)}
• .parent{position:relative;}  .children{position:absolute; top:0; bottom:0; left:0; right:0;   margin:auto;}

来源：https://www.cnblogs.com/xingxyx/p/11669551.html