“块”以占用整行空间而闻名，迫使其他元素从新行开始。换句话说，它们的宽度为包含块的网页或容器的 100%。 在本文中，我们将看到如何阻止通常行为的元素以及如何使用 CSS 将它们居中。
块元素行为：任何元素都可以通过将它们的显示属性设置为块“显示：块”来设置为像块一样的行为。还有一些其他元素，如标题、div 标签，默认情况下是块。因此，他们采用网页或容纳它的容器的全线或全宽。即使我们的内容占用了网页宽度的 20%，块属性仍将保留网页或容纳它的容器的完整 100% 宽度。
如何使这些块元素居中：我们已经看到了这个块元素的行为方式，我们观察到当它们采用全线宽时，为了使它们居中，我们只有水平控制它们的边距属性。
边距可以控制块元素的水平和垂直位置。为了使它们居中，我们可以调整 margin 属性，使其位于中心。
注意：我们可以看到“text-align :center”并没有使块元素居中。它们仅将非块或内联块元素居中。
使用边距属性居中块元素：我们需要指定左右边距，使其看起来居中。我们不需要手动执行此操作，我们有一个属性值“auto”，它将自动设置边距，以便将块元素放置在中心。使用以下 CSS 属性将块元素居中。
margin: auto示例 1：
HTML
Welcome To GFG
Default code has been loaded into the Editor.
hello
div who has default display : block
HTML
centering image using display: block
paragraph came to the new line even
if it is inline, because the img is
set to block
输出：
居中块
示例 2：我们有一个图像，它周围有一些空间，因此默认情况下，非块元素将位于 img 标签旁边，而不是在下一行。设置“display:block”属性后，我们就可以让我们的图片变成块元素了。它可以使用“margin: auto”属性居中。
注意： body 标签已设置为“text-align:center”属性。我们知道它不会影响块元素。
HTML
centering image using display: block
paragraph came to the new line even
if it is inline, because the img is
set to block
输出：
