本文整理一些利用css實現水平居中/垂直居中的一些方法，教程都很基礎，希望對大家有幫助！
一、水平居中
#1. text-align:center (行內元素)
# 給其父元素設定屬性text-align:center;
2. margin: 0 auto(區塊級元素)
#為元素本身設定margin: 0 auto;
3. 元素的寬度固定
1⃣️ position+margin-left
# #.ele{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
}登入後複製
2⃣️ position+left:0;right:0;margin:0 auto
#
.ele{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}4.元素的寬度不固定
# 1⃣️
css3-transform
.ele{
position:absolute;
left:50%;
transform:translate(-50%,0);
}2⃣️css3-width:fit-content(當需要居中的元素設定了float:left時,可以給該元素的父元素設定如下屬性)
<span style="color: #000000">.ele-parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}<br>该属性目前只支持Chrome 和 Firefox浏览器.</span>登入後複製
3⃣️flex
#
.ele-parent{
display: flex;
justify-content: center;
}# #二、垂直置中
## 1. line－height:eleparent-height
單行文字的垂直居中可以設定屬性
line－height:父元素height2. 元素的高度固定
1⃣️position＋margin-top#.ele-parent{
position:relative;
}
.ele{
position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;
}登入後複製
position+top:0;bottom:0;margin:auto 0#
.ele{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;
}<span style="color: #000000">.ele-parent{
display:table;
}
.ele{
display:table-cell;<br> vertical-align:middle;
}</span><strong><span style="font-size: 16px"> </span></strong>.ele{
position:absolute;
top:50%;
transform: translate(0,-50%);
}.ele-parent{
display: flex;
align-items:center;
}以上是css實現水平居中/垂直居中的一些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
