<body>
<div class="main">
<div class="box"></div>
</div>
</body>
- 绝对定位加
margin: auto; ：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
position: relative;
margin: 30px auto;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
- 绝对定位加负 margin：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
position: relative;
margin: 30px auto;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
- margin 推动：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 30px auto;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
margin: 150px 150px;
}
</style>
- flex 居中：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 30px auto;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
- transform：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 30px auto;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
- 子盒子宽高不确定（需要保证left和right的百分数一样，top和bottom的百分数一样）：
<style>
* {
padding: 0;
margin: 0;
}
.main {
width: 400px;
height: 400px;
border: 2px solid #000;
margin: 30px auto;
position: relative;
}
.box {
background-color: #f00;
position: absolute;
left: 25%;
top: 25%;
right: 25%;
bottom: 25%;
}
</style>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
