前端面试——css水平垂直居中详细讲解

1、使用flex布局（利用flex的alignItems:center垂直居中，justifycontent:center水平居中）

2、利用相对定位和绝对定位的margin:auto（相对定位下，使用绝对定位将上下左右都设置为0，再设置margin:auto即可实现居中）

3、利用相对定位和绝对定位，再加上外边距和平移的配合（相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%即可）

4、利用text-align和vertical-align，利用text-align:center实现行内元素的水平啥修药挣居中，再利用vertical-align:middle实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，elementUI的消息弹窗居中实现方式就是如此

5、父元素设置为：position: relative;子元素设置为：position: absolute;上50%，左50%，然后减去元素自身宽度的距离就可以实现