共計 1961 個字符，預計需要花費 5 分鐘才能閱讀完成。

概述

在網頁設計中，div 是一個常用的元素，用于布局和樣式設置。div 居中顯示在網頁中十分常見，但是很多初學者會遇到 div 居中不了的問題。本文將從以下幾個方面對為什么 div 居中，及 div 居中不了進行詳細闡述。

方面一：居中方法

在網頁設計中，div 居中顯示可以使用多種方法。最常見的方法是使用 CSS 樣式表。對于一個固定寬度的容器，可以使用以下的 CSS 樣式實現水平居中：

“`

.container{

width: 200px;

margin: 0 auto;

}

這里的“margin: 0 auto;”就是實現水平居中的關鍵語句。0 表示上下邊距為 0，而 auto 表示左右邊距自動調整。這樣就可以實現 div 居中顯示了。

如果要實現水平垂直居中，可以使用以下的 CSS 樣式：

height: 200px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -100px;

就可以實現一個寬高都為 200px 的 div 居中顯示了。left 和 top 屬性將 div 定位在頁面的中心位置，而 margin-left 和 margin-top 則讓 div 自身向左和向上移動自身寬度和高度的一半，以實現水平垂直居中的效果。

方面二：居中原理

為什么 CSS 樣式中的“margin: 0 auto;”可以實現水平居中呢？這是因為當我們設置了一個 div 的寬度之后，它就會變成一個塊級元素，寬度就會占據整個父元素的寬度。而設置了左右邊距為 auto，就相當于讓瀏覽器自動計算左右邊距的值，從而讓 div 水平居中顯示。

對于水平垂直居中，我們使用了 position:absolute 屬性和 left、top 屬性，讓 div 相對于頁面定位，然后使用負的 margin 值來向左和向上移動自身的寬度和高度的一半。就可以實現水平垂直居中的效果。

方面三：容器大小

為什么有時候使用“margin: 0 auto;”無法實現 div 居中顯示呢？這是因為在這種情況下，div 的寬度可能是通過內容撐開的，而不是我們手動設置的寬度。就需要在父元素中設置一個固定寬度，才能實現 div 水平居中。

對于水平垂直居中，容器的大小也是一個關鍵因素。如果容器大小和 div 大小相同，那么使用上述的方法就可以實現水平垂直居中。但如果容器大小和 div 大小不同，就需要進行一些調整。如果容器比 div 大，可以讓 div 相對于容器定位，然后使用負的 margin 值向左和向上移動自身的寬度和高度的一半。如果容器比 div 小，可以使用 position:relative 屬性和 left、top 屬性來讓 div 相對于容器定位。

方面四：浮動和定位

在網頁設計中，浮動和定位也是常見的布局方式。使用浮動和定位時，div 居中顯示可能會遇到問題。

對于浮動，如果一個 div 浮動到左側或右側，就無法使用“margin: 0 auto;”實現水平居中。可以使用 text-align 屬性來實現水平居中。將 div 的父元素設置為 text-align:center，就可以實現水平居中的效果。

對于定位，如果一個 div 使用了 position:absolute 或 position:relative 屬性，就需要使用 left 和 top 屬性來控制其位置。如果想要實現水平居中，可以將 left 屬性設置為 50%，然后再使用負的 margin 值向左移動自身寬度的一半。如果想要實現垂直居中，可以將 top 屬性設置為 50%，然后再使用負的 margin 值向上移動自身高度的一半。

方面五：響應式布局

在移動設備上，網頁的顯示效果可能會與 PC 端不同。響應式布局已經成為了網頁設計中的一個重要方向。在響應式布局中，div 居中顯示可能會遇到一些問題。

對于一個固定寬度的容器，可以使用 CSS 樣式設置其寬度為百分比值，以實現響應式布局。這時就不能使用“margin: 0 auto;”來實現水平居中，因為百分比值是相對于父元素的寬度而言的。可以使用 text-align:center 來實現水平居中。

對于水平垂直居中，可以使用 CSS3 中的 transform 屬性來實現。可以使用以下的 CSS 樣式：

width: 100%;

height: 100vh;

position: relative;

.box{

transform: translate(-50%, -50%);

就可以實現一個寬高都為 200px 的 div 在移動設備上的水平垂直居中了。

方面六：其他問題

除了上述問題外，div 居中顯示還可能會遇到其他問題。在一些老舊的瀏覽器中，可能無法支持 CSS3 中的 transform 屬性，這時就需要使用其他的方法來實現水平垂直居中。

如果一個 div 包含了其他的元素，而這些元素的大小和位置不同，就可能會影響到 div 居中顯示的效果。就需要對這些元素進行調整，以確保 div 居中顯示。

丸趣 TV 網 – 提供最優質的資源集合！