div的居中
水平居中
水平居中：
- 给 div 设置一个宽度，然后添加 margin:0 auto 属性
div{
width: 300px;
margin: 0 auto;
}
- 把div设为inline-block，给父元素设置text-align:center,且父元素的宽度不设置
<style>
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
- 利用flex布局的justify-content:center;
水平垂直居中
- 绝对定位的div居中
.container{
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
background-color: rgb(146, 73, 73);
}
- top:50%,left:50%,margin减去宽高的一半
.container{
position: absolute;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
top: 50%;
left: 50%;;
background-color: rgb(146, 73, 73);
}
- 未知容器的宽高，利用
transform属性
.container{
position: absolute;
width: 300px;
height: 300px;
/* translate:移动; */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: rgb(146, 73, 73);
}
- 利用flex布局
注意父元素一定要设置宽高
.container{
width:100%;
height:600px;
display: flex;
justify-content: center;
align-items: center;
}
.bin{
width: 300px;
height: 300px;
background-color: rgb(228, 127, 127);
}
- 利用text-align:center和vertical-align:middle属性
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
white-space: normal;
vertical-align: middle;
}