css實現水平居中/垂直居中的一些方法

本文整理一些利用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:父元素height

2. 元素的高度固定

　　1⃣️position＋margin-top

#

.ele-parent{
    position:relative;
}
.ele{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
}

　　2⃣️

 position+top:0;bottom:0;margin:auto 0#

.ele{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

######3.元素高度不固定###################　　1⃣️vertical-align######### #######

<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>

###############　　2⃣️css3-transform################

.ele{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
}

######### # 　　3⃣️######flex################

.ele-parent{
    display: flex;
    align-items:center;
}

#########　　##############暫時只整理到這些，不足之處還請批評指正！ ！ ！ ##################　　############# ####

以上是css實現水平居中/垂直居中的一些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！