div居中顯示的多種方法及實現

一、div居中顯示三種方法

在web前端頁面開發過程中，需要實現div居中，一般我們採用以下三種方式:

1、使用CSS設置margin

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

解釋：通過設置 div 元素的左右 margin 值為 auto，可以使其在可見區域內居中。

2、使用CSS設置display屬性

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

解釋：通過設置容器元素的 display 屬性為flex，且設置 justify-content 和 align-items 屬性為center可以實現div居中顯示。

3、CSS3中新增了transform 屬性實現水平垂直居中

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

解釋：通過調整容器坐標原點的位置，使其在水平、垂直方向上偏移50%的距離，並使用position屬性為absolute，可以實現div居中顯示。

二、div居中顯示代碼

div居中顯示代碼為以下CSS樣式：

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

三、怎麼讓div居中顯示

要讓div居中顯示，可以通過以上三種方法中的一種來實現。其中，使用CSS設置margin值的方式比較簡單好用，適用於大多數場景。

四、div居中顯示最上層

如果需要將div居中顯示在最上層，可以通過設置CSS中的z-index屬性來實現：

div {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 9999;
}

五、div居中顯示上面無空格

如果需要在div上下邊界無空格地顯示，可以通過設置CSS中的line-height屬性來實現：

.container {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

六、圖片在div居中顯示

在div中，圖片的居中顯示需要分兩種情況考慮，一是圖片大小小於div的大小，二是圖片大小大於div的大小：

1、圖片大小小於div的大小

div {
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
}

img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

解釋：為div元素設置text-align和line-height屬性使圖片垂直居中。同時為img元素設置max-height和max-width屬性，自適應顯示圖片。

2、圖片大小大於div的大小

div {
    position: relative;
}

img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

解釋：為img元素設置絕對定位和margin值來使其水平、垂直居中顯示。

七、div左右居中顯示

若需要div左右居中顯示，需要將該div設置為inline-block元素，再將其容器設置為text-align:center，並為之前的div設置為no-wrap，實現左右居中：

.container {
    text-align: center;
}

div {
    display: inline-block;
    white-space: no-wrap;
}

八、div水平居中顯示

可以將該div的margin-left和margin-right屬性值均設置為auto，即可實現水平居中：

div {
    margin-left: auto;
    margin-right: auto;
}

九、div塊居中顯示

對於inline-block元素，可以通過設置寬度並使用text-align:center，實現塊居中顯示；對於block元素，只需使用margin:0 auto，即可實現塊居中顯示。

1、inline-block元素塊居中顯示：

.block {
    display: inline-block;
    width: 200px;
}

.container {
    text-align: center;
}

2、block元素塊居中顯示：

.block {
    width: 200px;
    margin: 0 auto;
}