11种方式，以中心Div或文本在CSS Div

。中央 {
边框：5px solid＃ffff00;
文字对齐：中心;
}

这是HTML：

 div内的文本以水平为中心。

结果:

图片来源

使用justify-content属性

上面的规则有一个例外。如果您使用的是display属性以将div定义为flex容器，则无法在div内水平地将文本对齐属性水平静音。相反，您必须使用justify-content属性并将其定义为“Center”。

让我们像上面一样创建一个带有黄色边框的div元素。In your HTML, you’d give the div the class name “center" and use the same class selector to style it with CSS. You can start by defining the border property as you did above. Then, define the display property as "flex" to make the div a flex container and define the justify-content property as "center."

这是CSS：

。中央 {
边框：5px solid＃ffff00;
显示：Flex;
证明 - 内容：中心;
}

这是HTML：

 div内的文本以水平为中心。

结果:

图片来源

如何居中文本在Div垂直

有三种方法可以使div中的文本垂直居中。它们比用于将div中的文本水平居中的方法稍微复杂一些。

让我们来看看下面的每种方法的示例。

使用Padding属性

在大多数情况下，可以使用padding属性将文本垂直居中。虽然可以使用手写形式，但使用速记padding属性更容易，因为只需设置两个值。第一个值将设置顶部和底部填充。第二个将设置左右填充。因为您想要将文本垂直居中，所以第一个值可以是任何正的长度或百分比值。第二个值应该是0。

这是CSS：

。中央 {
边框：5px solid＃ffff00;
填充：50px 0;
}

这是HTML：

 div内的文本垂直居中。

结果:

图片来源

使用Line-Height属性

在大多数情况下，您还可以通过设置Line-Height属性垂直垂直居中文本具有等于​​容器元素的高度的值。

让我们像上面一样创建一个带有黄色边框的div元素。在HTML中，只需在div中添加一些文本，并将类名命名为“center”。不要在文本周围添加段落标记，因为这会使文本偏离中心。现在使用类选择器。center来用CSS样式化它。可以像上面那样定义border属性。现在用相同的值设置高度和行高属性。

这是CSS：

。中央 {
边框：5px solid＃ffff00;
线高：150px;
身高：150px;
}

这是HTML：

此单行文本垂直居中。

结果:

图片来源

该方法只适用于一行文本。如果在一个div中有多行文本，那么就必须定义更多的属性。

完成上面的步骤后，您将使用CSS选择器.Center P设置一个新的规则集，以在DIV中的段落中样式。首先，您希望将Display属性定义为“内联块”，因此该段落在DIV内自然流动。然后将行高属性设置为“正常”，垂直对齐属性“。这将确保div内的文本垂直居中，无论是一行文本还是多行。

这是CSS：

。中央 {
边框：5px solid＃ffff00;
线高：150px;
身高：150px;
}
.center p {
显示：内联块;
线高：正常;
垂直对齐：中间;
}

这是HTML：

 div内的文本垂直居中。div内的文本垂直居中。div内的文本垂直居中。

结果:

图片来源

使用Align-Items属性

同样，如果您使用的是Display属性定义Div作为Flex容器，那么您无法在DIV中垂直使用上面的方法到居中文本。相反，您必须使用align-items属性并使用“中心”定义它。

让我们创建相同的div元素如上所述，给它一个类名.Center并定义CSS中的边境属性。然后，将Display属性定义为“Flex”以使Div A Flex容器。更清楚地看到文本垂直居中，定义高度属性。否则，Flex容器只需要包含在内部的段落的情况。然后，将alpion-items属性定义为“Center”。

这是CSS：

。中央 {
边框：5px solid＃ffff00;
显示：Flex;
身高：150px;
对齐项目:中心;
}

这是HTML：

 div内的文本垂直居中。

结果:

图片来源

如何在CSS中心Div

您可以在CSS中以几种不同的方式居中div。虽然在页面中水平居中div很容易，但垂直居中则比较困难(但仍然是可以管理的!)

我们将通过以下两种方法行走，然后解释您如何水平和垂直居中的DIV或者在另一个div内居中。

如何居中一个Div水平

要在页面上水平驻留DIV，只需将元素的宽度和边距属性设置为自动。这样，DIV将占用CSS中指定的宽度，并且浏览器将确保剩余空间在两个边距之间平等分割。

让我们看一个基本的例子CSS框模型。假设你想创建一个div元素，里面有一个短段落，周围有一个黄色边框，就像上面的例子一样。在你的HTML中，你应该给div一个类名，比如“center”。然后，您可以使用类选择器.center来设置它的边界、宽度、边框和填充属性。

注意，与margin属性不同的是CSS填充物业用于在div的边框和div内的段落之间创建空格(内联元素)。

您可以了解这两个属性之间的差异CSS空白和填充:有什么区别?

这是CSS：

。中央 {
保证金：汽车;
宽度:60%;
边框：5px solid＃ffff00;
填充:10 px;
}

HTML:

此div占用CSS中指定的宽度，并且剩余空间在两个边距之间平等分割。

这是结果：

图片来源

如何居中一个Div垂直

要在页面上垂直居中，您可以使用CSS位置财产、top属性和transform属性。

首先将DIV的位置设置为绝对，使其从正常文档流中取出。

然后将顶部属性设置为50％。这将介绍浏览器将DIV的顶部边沿与页面的中心垂直（即，页面50％）。这是问题：在页面中间排列的div的顶部边缘会使div看起来。这是一个例子。

图片来源

要真正使div居中，您需要定义最后一个属性，称为CSS转换属性。虽然有九种不同的转换方法（但这甚至不是包括3D变换），但您希望使用Translate（）方法沿Y轴移动DIV。具体而言，您希望从当前位置移动50％。这将告诉浏览器将DIV的中心放在页面的垂直中心。

让我们看看您需要编写的代码。

这是CSS：

。中央 {
位置:绝对的;
上限：50％;
变换：翻译（0，-50％）;
边框：5px solid＃ffff00;
填充:10 px;
}

HTML:

 .
 .

这是结果：

图片来源

如何居中一个Div水平和垂直

要在页面上水平和垂直居中一个div，您可以遵循上面一节中列出的几乎完全相同的步骤。你将使用CSS的position, top和transform属性-唯一的区别是你也将使用left属性来水平居中div。

首先将DIV的位置设置为绝对，使其从正常文档流中取出。然后将左侧和顶部属性设置为50％。这将浏览器通过水平和垂直地将DIV的左侧和顶部边沿与页面的中心进行排列（即，页面右下方50％）。如果您在那里停止，您将遇到与之前的问题相同：在页面中间排列的DIV的边缘将使DIV看起来。看看下面的例子。

图片来源

要将DIV水平和垂直真实地居中，您需要定义变换属性。具体而言，您希望将DIV 50％从当前位置移动到左侧。这将告诉浏览器将DIV的中心放在页面中心。

这是CSS：

。中央 {
位置:绝对的;
左：50％;
上限：50％;
变换:翻译(-50%,-50%);
边框：5px solid＃ffff00;
填充:10 px;
}

HTML:

这个div的边缘垂直和水平居中，使其偏离中心。

这是结果：

图片来源

如何将DIV置于DIV中

有三种方法可以在一个div中居中一个div。使用每种方法，您可以在一个div中水平居中一个div，垂直居中一个div，或者两者都居中。

在下面方法的示例中，我们将跨越如何水平和垂直居中居中DIV。

使用位置，顶部，左和边距属性

要在页面的div中水平或垂直居中div，可以使用位置、顶部、左侧和边距属性(如果您知道div的宽度和高度)。

要启动，请将div元素包装在您的HTML中的另一个div元素中。给出一个像“孩子”这样的类名称和外部div作为“父级”等类名。

然后在CSS中，使用类选择器.parent达到外部div。设置其高度，宽度和背景颜色。颜色将帮助您更清楚地看看内部div是如何居中的。然后将位置属性设置为“相对”。

现在使用类选择器.Child，你可以改变内部div。设置其高度，宽度和背景颜色。然后将位置属性设置为“绝对”。现在将顶部和左级属性设置为50％。记住t.它告诉浏览器将div的左边缘和上边缘与父容器的中心水平和垂直对齐。

如果您在那里停止，您将遇到与之前的问题相同：在父容器中间排列的DIV的边缘将使孩子div看起来。为了真正居中儿童Div，您可以设置负顶和左边缘。每个值应恰好是子元素的高度和宽度的一半。

这是CSS：

.parent {
背景:# CCCCCC;
身高：200px;
宽度：200px;
位置：相对;
}
.child {
背景:# FFFF00;
宽度：70px;
身高:70 px;
位置:绝对的;
上限：50％;
左：50％;
边缘：-35px 0 0 -35px;
}

这是HTML：

结果:

图片来源

使用位置，顶部，左和变换属性

在高度和宽度未知的div中水平和垂直居中居中div，您可以使用变换属性而不是边距属性。您仍然将使用CSS位置，顶部和左图。

按照上面的步骤在HTML中创建外部和内部div。在您的CSS中，以相同的方式样式：将高度，宽度，背景颜色和位置设置为“相对”。

现在，你几乎以同样的方式风格地位。您可以设置背景，将其位置设置为“绝对”，顶部和左级属性至50％。尽管如此，您将无法定义宽度或高度属性。

您也不会定义保证金属性。相反，您将定义转换属性以将子Div 50％从容器的边沿移动到左右。这将确保孩子div真正居中在父容器中。

这是CSS：

.parent {
背景:# CCCCCC;
身高：200px;
宽度：200px;
位置：相对;
}
.child {
背景:# FFFF00;
位置:绝对的;
上限：50％;
左：50％;
变换:翻译(-50%,-50%);
}

这是HTML：

这个div垂直和水平居中。

结果:

图片来源

使用Flexbox.

您可以使用Flexbox中的DIV中驻DIV。FlexBox是一种很好的方法，因为它响应了，不需要保证金计算 - 但有一些额外的步骤可以记住。

将DIV水平和垂直使用FlexBox居中，您需要将HTML和Body的高度设置为100％。您也可以将父容器的高度设置为100％，如果您希望它占用整个视口，即使它被调整大小。对于此演示，我将将父容器设置为特定高度。

此外，您需要将父容器定义为Flex容器。您可以通过将Display属性设置为“Flex”来执行此操作。然后将alpion-items和alicify-content属性定义为“Center”。这将告诉浏览器将Flex项目（DIV内的DIV）垂直和水平居中。

你可以通过阅读了解更多关于Flexbox布局模块的信息以下是FlexBox，CSS网格和Bootstrap之间的区别。现在，让我们来看一个例子。

在下面的示例中，我们将使用黄色背景颜色，而不是边框​​的Div，内部没有文本。它看起来像一个黄色的方形。我们还将将背景颜色添加到父容器中，因此您可以更清楚地看到子Div元素如何水平和垂直居中。

这是CSS：

超文本标记语言
身体{高度：100％;
}
.parent {
身高：200px;
背景:# CCCCCC;
显示：Flex;
对齐项目:中心;
证明 - 内容：中心;
}
.child {
背景颜色：＃ffff00;
宽度：100px;
身高：100px;
}

HTML:

< div class = "孩子" > < / div >

这是结果：

图片来源

建立定制布局

无论您是在水平，垂直还是在另一个DIV中都是DIV，一系列编码知识都将允许您控制和自定义布局。例如，了解裕度，定位和Flex属性将使您在页面上几乎将其中心居中。

如果你刚刚开始学习HTML，CSS和JavaScript但是，上面概述的步骤似乎太复杂了。在这种情况下，您可以始终使用拖放构建器如元素。通过垂直和水平对齐以及内联定位等特性，Elementor简化了构建过程的每一步，因此您不必编写一行代码。

最初发布于1月28日，2021年7:00:00，Updated 3月17日2021年