利用css使元素居中的手段

一.使用伪类

*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}

定位居中

*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:0;right:0;top:0;bottom:0;margin:auto;
}

定位居中二

*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:50%;top:50%;margin:-150px 0 0 -100px;
}

定位居中三

*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
}
弹性盒子居中
*{margin:0;}
html,body{height:100%;}
body{display:flex;justify-content:center;align-items:center;}
div{width:200px;height:300px;border:2px solid #000;}