Why is it so hard to center divs in HTML?

Why does this code not center all three elements inside the outer div?

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

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

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

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

How can I do this, without specifying absolute values? Why is it so hard to center divs in HTML with hacks like margin-left: auto; and margin-right: auto;?

Edit: I added a span to the second inner div.