div 居中(div居中的css代码是什么)

div 居中(div居中的css代码是什么)

1、原文：–10对一个开发者来说，将一个居中可能是世界上最困难的工作。读完这篇文章，你就会觉得没有那么难了。

2、这篇文章将讲解10种居中的方式。我们将从的属性、和三个方面来探索如何实现居中。

3、我相信通读完整篇文章之后，你将成为居中的专家。我将使用同样的来讲解10种方法。这个包含一个父和一个子元素。

4、本文的目的是让内部实现相对于父元素的居中。仅通过对修改，来呈现10种不同的方法。

5、这是基本的和样式结果：。我们创建了一个父元素，并且将其和设置为。同时，我们在内部创建了一个子元素，并且将其和设置为。

div 居中(div居中的css代码是什么)

1、最终目标是完成如下图的转变：。中的属性是设置元素在页面的定位方式。

2、属性的默认值为，其他值包括：、和。如果将一个元素设置为，该元素相对于整个页面的位置就是绝对的。如果我们想要一个相对于整个页面居中的话，可以采用这个方法。此外，将父元素设置为，同时将子元素的位置设置为，通过，绝对，这时的绝对是相对于父元素的，而不是整个页面。

3、上述代码例子就是采用这样的方法。我们给父元素添加，子元素添加。除了使用属性，我们还可以使用、和四个属性来定义元素的位置，这样决定元素最终的位置。和指定元素垂直方向的定位，和指定元素水平方向的定位。

4、除了我们从第一点学习到的知识点外，在这里我们使用了中的属性，允许浏览器给子元素选择合适的外边距。通常子元素占据了指定的宽度后，浏览器会均匀地分配剩下的空间，剩下的空间包括左右外边距、上下外边距和上下左右外边距三种情况。如果我们只设置了、以及，子元素就会垂直居中。

5、同样，如果我们只设置了、以及，子元素就会水平居中。如果我们像代码示例这样，声明了所有属性，就会得到一个完美的垂直且水平居中的。上述的两种方式是使用经典的办法实现页面元素居中。