已知子元素宽高
position+负margin
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box{
width: 300px;
height: 300px;
background: blue;
position: relative;
}
.content{
width: 100px;
height: 100px;
background: red;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
position+calc
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box{
width: 300px;
height: 300px;
background: blue;
position: relative;
}
.content{
width: 100px;
height: 100px;
background: red;
text-align: center;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
position+margin:auto
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box{
width: 300px;
height: 300px;
background: blue;
position: relative;
}
.content{
width: 100px;
height: 100px;
background: red;
text-align: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:auto;
}
</style>
不知子元素宽高
position+translate(-50%,-50%)
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box{
width: 300px;
height: 300px;
background: blue;
position: relative;
}
.content{
width: 100px;
background: red;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
flex布局,align-items:center
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box {
width: 300px;
height: 300px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.content {
width: 100px;
background: red;
text-align: center;
}
</style>
父元素display:table-cell;vertical-align:middle;子元素display:inline-block;
<div class="box">
<div class="content">
我是content
</div>
</div>
<style>
.box {
width: 300px;
height: 300px;
background: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content {
width: 100px;
background: red;
text-align: center;
display: inline-block;
}
</style>