- 利用绝对定位:先离开左、上50%,然后再向左、上移动半个盒子的宽和长。
.father1 {
position: relative;
}
.son1 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: aqua;
}
- margin:auto
.father2 {
position: relative;
}
.son2 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: hotpink;
}
- 弹性盒子
.father3 {
display: flex;
justify-content: center;
align-items: center;
}
.son3 {
background-color: green;
}
- 利用display:table-cell;然后设置vertical-align:middle。
.father4 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son4 {
display: inline-block;
background-color: yellow;
}
HTML结构和样式
<style>
section {
height: 300px;
width: 300px;
border: 1px solid pink;
}
div {
width: 100px;
height: 100px;
}
</style>
<body>
<section class="father1">
<div class="son1">1</div>
</section>
<section class="father2">
<div class="son2">2</div>
</section>
<section class="father3">
<div class="son3">3</div>
</section>
<section class="father4">
<div class="son4">4</div>
</section>
</body>