今天复习了一下关于居中的几种方式
(1)水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div {
width: 200px;
margin: 0 auto;
}
(2)让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 方便看效果 */
background-color: pink;
}
(3)水平垂直居中一
div {
/* 相对定位或绝对定位均可 */
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
/* 外边距为自身宽高的一半 */
margin: -150px 0 0 -250px;
/* 方便看效果 */
background-color: pink;
}
(4)水平垂直居中二
div {
/* 相对定位或绝对定位均可 */
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 方便看效果 */
background-color: pink;
}
(5)水平垂直居中三:flex盒模型(很强大,建议多了解一下)
.container {
display: flex;
height: 500px;
width: 500px;
border: 1px solid #ccc;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
/* 方便看效果 */
background-color: pink;
}