水平垂直局中"/>
水平垂直局中
设置父元素属性:
display:flex
align-items:center//垂直局中
justify-content:center//水平居中
设置子元素属性
- 定位,子元素没有固定宽高
position:absolute/fixedtop:0left:0right:0bottom:0
- 定位,子元素有固定宽高
position::absolute/fixedtop:50%margin-top:-一半高度 / transform:translateY(-50%)水平居中同理
设置父子元素属性
- 依靠父元素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;}
更多推荐
水平垂直局中
发布评论