垂直+水平居中 css

垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论

1.父盒子固定高度[定位]

实现1:

father-box: position:relative

child-box:position:absolute+left:50%+top:50%+translate(-50%,-50%)

实现2:

father-box:position:relative

child-box: position:absolute+top:0+right:0+bottom:0+left:0+margin:auto

2.父盒子不固定高度[弹性盒子]

实现1

father-box:display:table

扫描二维码关注公众号,回复: 110664 查看本文章

child-box:display:table-cell+vertical-align:middle+text-align:center

实现2:

father-box:display:flex+align-items:center+justify-content:center

child-box:flex:1

猜你喜欢

转载自www.cnblogs.com/artimis/p/8991749.html