-
position(子元素宽高度已知)
.parent{ position:relative; } .child{ width:100px; height:100px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
-
position(子元素宽高度未知)
.parent{ position:relative; } .child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
-
flex布局(子元素需要宽高度)
.parent{ display:flex; justify-content:center; align-items:center; }
-
table-cell实现垂直居中(子元素可以不是块元素)
.parent{ display:table-cell; vertical-align:middle; }