非常簡潔易懂,排名不分先後,開整!
HTML:
<div class="main">
<div class="content"></div>
</div>
第一種:常見的margin
.main {
position: relative;
width: 800px;
height: 500px;
background-color: lightblue;
}
.content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
background: lightpink;
}
第二種:position+transform
.main {
position: relative;
width: 800px;
height: 500px;
background-color: lightblue;
}
.content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: lightpink;
}
第三種:通過position的top、right、bottom、left
.main {
position: relative;
width: 800px;
height: 500px;
background-color: lightblue;
}
.content {
position: absolute;
width: 300px;
height: 200px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: lightpink;
margin: auto;
}
第四種:display:table-cell
.main {
width: 800px;
height: 500px;
background: lightblue;
display: table-cell;
/*標配*/
vertical-align: middle;
/*標配*/
}
.content {
width: 300px;
height: 200px;
background: lightpink;
margin: auto;
/*標配*/
}
/*三個標配一起使用才能發揮作用*/
第五種:calc,不能大量使用,會影響效能
.main {
width: 800px;
height: 500px;
background-color: lightblue;
}
.content {
width: 300px;
height: 70px;
background: lightpink;
margin: auto;
position: relative;
top: calc((100% - 70px)/2);
}
第六種:flex+align-items
.main {
display: flex;
width: 800px;
height: 500px;
background-color: lightblue;
justify-content: center;
align-items: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
}
第七種:flex+align-self
.main {
display: flex;
width: 800px;
height: 500px;
background-color: lightblue;
justify-content: center;
text-align: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
align-self: center;
}
第八種:flex+margin
.main {
display: flex;
width: 800px;
height: 500px;
background-color: lightblue;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
margin: auto;
}
第九種:grid+align-content
.main {
display: grid;
width: 800px;
height: 500px;
background-color: lightblue;
justify-content: center;
align-content: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
}
第十種:grid+align-item
.main {
display: grid;
width: 800px;
height: 500px;
background-color: lightblue;
justify-content: center;
align-items: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
}
第十一種:grid+align-self
.main {
display: grid;
width: 800px;
height: 500px;
background-color: lightblue;
justify-content: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
align-self: center;
}
第十二種:grid+margin
.main {
width: 800px;
height: 500px;
display: grid;
background: lightblue;
}
.content {
width: 300px;
height: 200px;
margin: auto;
background: lightpink;
}
第十三種:grid+palce-content
.main {
width: 800px;
height: 500px;
display: grid;
place-content: center;
/*這是justy-content與align-items的結合寫法*/
background-color: lightblue;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
}
第十四種:grid+place-items
.main {
display: grid;
width: 800px;
height: 500px;
background-color: lightblue;
place-items: center;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
}
第十五種:grid+template
.main {
margin: auto;
width: 800px;
height: 500px;
background-color: lightblue;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
grid-template-areas: `. . .` `. amos .` `. . .`;
}
.content {
width: 300px;
height: 200px;
background: lightpink;
grid-area: amos;
}
好啦,十五種方法Get!