为什么div居中显示及div居中不了

共计 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 网 – 提供最优质的资源集合！