为什么在 HTML 中居中 div 如此困难？

Question

为什么这段代码没有将所有三个元素置于外部 div 的中心？

.center 
{
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

<div class="center">
  <h1 class="center">Headline</h1>

  <div class="center"><span>Some text</span></div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

如何在不指定绝对值的情况下执行此操作？为什么用 margin-left: auto; 和 margin-right: auto; 这样的 hack 很难将 divs 集中在 HTML 中？

Answer 1

要居中对齐文本或行内元素，您只需要使用 text-align: center;

自动边距设置为与内联块或块级元素的某些固定宽度元素对齐。

因此，在您的情况下，以下内容以 div 元素而非文本为中心：

.center {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

添加 text-align: center 也会对齐文本：

.center {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: center;
}

  .center {
 margin-left: auto;
 margin-right: auto;
 width: 70%;
 text-align: center;
}

<div class="center">
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center">Some text</div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

Answer 2

首先，您可以使用 <center> 元素将其内容居中对齐。

不幸的是，CSS 目前还没有办法完整复制 <center> 布局管理器。

<center>
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center">Some text</div>

  <form class="center">
    <button>Button</button>
  </form>
</center>

更新：技术上 <center> 在 HTML5 中已弃用，但它适用于所有浏览器。并且会一直工作到 CSS 没有匹配的功能。

但您可能会对此感到满意：

.center {
  text-align:center;
}

<div class="center">
  <!-- container -->
  <h1 class="center">Headline</h1>

  <div class="center">Some text</div>

  <form class="center">
    <button>Button</button>
  </form>
</div>

Answer 3

当使用具有 auto 属性的边距时，您需要提供一个固定值（不是百分比）作为宽度。

例如，如果您将百分比更改为 px、cm、in 或 em 值，您的代码将正常工作。

        .center
        {
            margin-left: auto;
            margin-right: auto;
            width: 70px;
        }

https://jsfiddle.net/s1napggb/

然而，为了使具有浮动值的元素居中，需要 flexbox、CSS 媒体查询或一些 Javascript。

Answer 4

Here是一个例子，这是你要找的吗？

Here 是居中元素的好指南

我认为您应该将元素分开，而不是尝试使用一刀切 class，特别是当您想要引用 div 和文本时，它可能会随着项目的缩放而变得更脏。但是，上面的示例使用了您的代码，因为您似乎想对所有项目使用相同的 class。我使用 display: block 以防元素不是块项目。

上面的项目居中。

请记住

CSS

.center {
  display: block;
  width: 70%;
  text-align: center;
  margin: 0 auto;
}

Answer 5

只需添加 text-align: center

这是一个例子 https://jsfiddle.net/txtz8duL/

.center {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: center;  
}

这里还有一些变化： https://css-tricks.com/centering-css-complete-guide/

Answer 6

您可以使用 text-align 将任何内容居中，如下所示： <h1 style="text-align:center"> Sample Heading</h1>

为什么在 HTML 中居中 div 如此困难？

Why is it so hard to center divs in HTML?

html

css

center