CSS 中的 margin 属性可用于将块元素（如 div）水平居中。我们可以设置元素的宽度，这样可以防止容器拉伸。块元素占据完整的空间线，这迫使其他元素占据下一行，因为块元素拥有 100% 的容器。
将块元素居中对齐
网页上任何开始新行的元素都被视为块级元素。例如标题标签、div等
这些块元素占据网页的整个宽度。假设我们的网页上有一个元素，它只占用网页的 10%，但如果它是块元素，那么它将占用宽度本身的 100%。
我们可以通过将值设置为 block 属性来更改任何特定元素的显示属性。
语法
让我们看看显示属性 -
display: value;
以上是 display 属性的语法，可用于定义网页上特定元素的外观。
边距属性
现在我们知道了块元素的行为，我们将使用 margin 属性在水平面上对齐元素。
margin 属性将控制块元素的位置。我们将以元素居中的方式使用该属性，因为边距可以控制水平和垂直平面中的元素。
语法
让我们看看 margin 属性的语法 -
margin: value;
这里给出的是 margin 属性的语法，并且应该从左到右指定边距，以便块元素居中。 auto值可用于设置边距，使块状元素自动居中对齐。
注意 - 有一个属性 text-align 及其值中心。此属性不能用于此方法，因为它用于居中非块元素，如段落、跨度标签等。
示例
为了更好地理解该属性的功能，让我们看一个示例，在这个示例中，我们添加了一些标题和一个 div，其边距在 CSS 属性部分中设置为 auto，然后将它们与两个内联块一起移动。 div 的不同颜色告诉我们不同的显示，例如内联块等。
Example of text alignment to the center Hi, this an example
We are aligning the block elements to the text.
Welcome
How is your day GoingGood MorningGood Night
在上面的输出中，您可以看到标题和 div 元素与段落标签一起旋转。我们使用 text-align 属性将段落标签对齐到中心，并使用 margin 属性并将其值设置为 auto 来对齐块元素。
示例
在下面的程序中，我们将获取一个图像以及图像旁边的一个非块元素。然后，我们将图像的显示设置为块，将其边距设置为自动，然后将其与标题对齐到中心，并将段落的显示属性设置为内联块。
Example for text alignment Example for setting the block element
Hi this is another example for aligning the block element to the centre.
在输出中，您可以看到图像位于中心，文本位于下一行，正如我们想要的那样。
结论
将块元素与中心对齐是创建平衡和对称布局的好方法。通过使用文本对齐或边距自动值，您可以快速轻松地对齐设计中的任意数量的元素。通过一些练习，您将能够自信地使用这些技术！
