[HTML+CSS] 6種情況下使元素在父元素内居中顯示（水準居中/垂直居中/水準垂直居中）

1、内聯元素在父元素内居中顯示

常見内聯元素：

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var……

• 情境①：父元素未設定尺寸

<div class="parent" style="background:lightgray;">
    <span class="child">我是内聯元素</span>
</div>
           

/* 給父元素添加樣式 */
.parent {
    text-align: center;    /* 水準居中 */
}
           

• 情境②：父元素已設定寬高

<div class="parent" style="background:lightgray; width:300px; height:100px;">
    <span class="child">我是内聯元素</span>
</div>
           

/* 給父元素添加樣式 */
.parent {
    text-align: center;    /* 水準居中，不受寬度值影響 */
    line-height: 100px;    /* 垂直居中，line-height需與height一樣高 */
    /* 若還設定邊距，需左右相等、上下相等 */
}
           

2、塊級元素在父元素内居中顯示

常見塊級元素：

address、blockquote、center、dir、div、dl、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul……

• 情境①：父元素及該元素都未設定尺寸

<div class="parent" style="background:lightgray;">
    <p class="child">我是塊級元素</p>
</div>
           

/* 給父元素添加樣式 */
.parent {
    text-align: center;    /* 水準居中 */
}
           

• 情境②：父元素未設定尺寸，但該元素已設定寬高

<div class="parent" style="background:lightgray;">
    <p class="child" style="width:300px; height:100px; background:grey;">我是塊級元素</p>
</div>
           

/* 給該元素添加樣式 */
.child {
    margin: auto;    /* 水準居中 */
}
           

• 情境③：父元素已設定寬高，但該元素未設定尺寸

<div style="width:450px; height:150px; background:ghostwhite;">
    <div class="parent" style="width:300px; height:100px; background:lightgray;">
        <p class="child">我是塊級元素</p>
    </div>
</div>
           

/* 先給該元素添加樣式 */
.child {
    display: inline-block;    /* 轉換為行内塊元素，而且可繼續設定寬高 */
}

/* 再給父元素添加樣式，相當于内聯元素方法 */
.parent {
    text-align: center;
    line-height: 100px;
}
           

• 情境④：父元素及該元素都已設定寬高

<div style="width:450px; height:150px; background:ghostwhite;">
    <div class="parent" style="width:300px; height:100px; background:lightgray;">
        <p class="child" style="width:100px; height:30px; background:grey;">我是塊級元素</p>
    </div>
</div>
           

/* 先給父元素添加樣式 */
.parent {
    position: absolute;    /* position屬性是必須的，定位方式視需求而定 */
 /* top: 9px;
    left: 21px;    偏移距離視需求而定，若不設定則父元素不動 */
}

/* 再給該元素添加樣式 */
.child {
    position: absolute;    /* 相對父元素定位 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;    /* 水準垂直居中 */
 /* margin: 0 auto;    僅水準居中 */
 /* margin: auto 0;    僅垂直居中 */
}