css 实现垂直居中的方法
2018-07-20 本文已影响10人
秋秋秋web
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
}
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px; height:300px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div { width: 100px; height: 100px; }
