水平垂直居中, 面试简便记法

1.使用flex弹性布局

　　父元素设置display:flex；justify-content: center；align-items: center;

2.使用tranform + position

　　　将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕；
　　　子元素也设置为 positon:fixed，然后上下各设为 50%；再设置 transform:translate(-50%,-50%)。

3.使用position:fixed

　　将父元素设置为 positon:fixed，然后left, bottom, left, right都为 0；使其填满整个屏幕；

　　子元素也设置为 positon:fixed，然后left, bottom, left, right都为 0；margin 设置为 auto，实现水平垂直居中。

4.已知父元素宽高的情况下 , 使用子绝父相 , relative , absolute

　　父元素: position: relative;

　　子元素:

　　　　position: absolute;

　　　　top:50%;

　　　　left: 50%;

　　　　margin-left: 负的宽度的一半

　　　　margin-top: 负的高度的一半

水平垂直居中, 面试简便记法

原文：https://www.cnblogs.com/md-lw/p/12851612.html