参考文献 https://github.com/simaQ/cssfun/issues/3
> CSS3,使用flexbox布局
抛开兼容性,不需要考虑宽度和高度值。
<div id="parent">
<div id="item">test</div>
</div>
#parent {
display: flex;
width: 400px; /* 宽度值,随便啦 */
height: 400px; /* 高度值,随便啦 */
background-color: yellow;
}
#item {
width: 100px;/* 宽度值,随便啦 */
height: 20px;/* 高度值,随便啦 */
margin: auto;
background-color: red; /* Magic! */
}
> 如何使用transform居中div?
https://jingyan.baidu.com/article/3ea51489b053e852e61bbaa1.html
上下左右居中
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
单独上下居中或左右居中
上下
.center {
left: 50%;
transform: translateX(-50%);
}