1.水平居中： margin: 0 auto;
水平居中最常用的一種方法，作用於子元素
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #ffce38;
border: 1px solid black;
position: relative;
}
img {
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
2.水平居中： text-align:center
作用於父元素，對display:block不生效
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #ffce38;
border: 1px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
3.垂直水平居中：用position: absolute 與margin
此方法需要知道垂直居中元素的寬高，left跟top都設定成50%，然後margin-top與margin-left分別設定成寬高一半的負值
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #ffce38;
border: 1px solid black;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
4.垂直水平居中：還是用absolute與margin
與上個方法相比，優點是無需知道元素的寬高
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #ffce38;
border: 1px solid black;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
5.垂直水平居中：用absolute與transform
transform屬性可以對元素進行2D/3D轉換，旋轉，移動，縮放，傾斜
設定left、top為50%後，然後利用transform的translate屬性進行位移
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #e8e8e8;
border: 1px solid black;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
6.垂直水平居中：display:table-cell
display:table-cell是父元素變成表格樣式，然後再用表格樣式居中
vertical-align設定元素的垂直對齊方式，為middle 就是把子元素放在父元素中部
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: table-cell;
width: 300px;
height: 300px;
background: #e8e8e8;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<img src="img/head.png" />
</div>
</body>
複製程式碼
7.垂直水平居中：display: flex
把父元素設定為display:flex
在此前提下，align-items屬性用於設定子元素在父元素縱軸上的對齊方式
justify-content屬性用於設定子元素在父元素橫軸上的對齊方式
此種方法在移動端可以很好使用，在PC上有相容性問題
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background: #e8e8e8;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<img src="img/mogu2.png" />
</div>
</body>
複製程式碼