水平垂直局中

水平垂直局中"/>

水平垂直局中

设置父元素属性：

display:flex

align-items:center//垂直局中

justify-content:center//水平居中

设置子元素属性

1. 定位，子元素没有固定宽高

position：absolute/fixedtop:0left:0right:0bottom:0

1. 定位，子元素有固定宽高

position:：absolute/fixedtop:50%margin-top:-一半高度   /   transform:translateY(-50%)水平居中同理

设置父子元素属性

1. 依靠父元素text-align制造左右居中与父元素after伪类制造100%高度并利用vertical-align制造垂直居中，子元素使用inline-block

   .container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: center;}.container:after {content: '';display: inline-block;height: 100%;vertical-align: middle;}.children{display: inline-block;}