在项目中经常遇到要求一个小盒子相对于另一个大盒子水平垂直居中问题
有以下这些情况
1.小盒子固定宽高(定位方式,脱离文档流)
(1)margin:auto法
<div class="big-box">
<div class="small-box"></div>
</div>
.big-box {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
background: pink;
.small-box {
background: red;
width: 200px;
height: 200px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
(2)负margin法
<div class="big-box">
<div class="small-box"></div>
</div>
.big-box {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
background: pink;
.small-box {
background: red;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
}
(2)table布局法(未脱离文档流)(目前小盒子发现必须是用于行内块级元素,如有理解不对请留言)
<div class="big-box">
<img src="@/assets/image/p1.png">
</div>
.big-box {
width: 400px;
height: 400px;
background: pink;
display: table-cell;
overflow: hidden;
text-align: center;
vertical-align: middle;
img{
display: inline-block;
width: 200px;
height: 200px;
vertical-align: middle;
}
}
2. 小盒子有固定宽高,但是不清楚是多宽多高(css3中的新属性)
<div class="big-box">
<div class="small-box"></div>
</div>
.big-box {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
background: pink;
.small-box {
background: red;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
3. 弹性盒子法
<div class="big-box">
<img src="@/assets/logo.png" />
</div>
.big-box {
width: 400px;
height: 400px;
background: pink;
display: flex;
align-items: center;
justify-content: center;
}