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

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

 

转载于:https://www.cnblogs.com/artimis/p/8991749.html