Replacement for TAG <center>

Question

I have the following form:

.table {
  max-width: 500px;
  border-collapse: collapse;
  font-size: 12;
  width: 320px;
  text-align: center;
  box-shadow: 2px 2px 2px 2px #aaa;
}

.table tr td{
  padding: 8px 8px 8px 8px;


}
.campo {
  border: 1px double black;
}

#teste {
  overflow: auto;
  max-height: 500px;
  max-width: 18ç0px;
  position:absolute;
  z-index:999; 
  left:0%; 
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

#teste2 {
  overflow: auto;
  max-height: 500px;
  max-width: 300px;
  position:absolute;
  z-index:999; 
  right:0%;
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

<div id="teste">
  <form id="form1" name="form1" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="div1" style="display: none;"></div>
  </form>
</div>

<center>
  <h1>x</h1>
</center>
<form id="form2" name="form2" method="post" action="#">
  <center>
    <table class="table">
      <tr>
        <td class="campo">
          <span id="inf1">*x</span><br/>
          <input type="text" id="txt" name="txt" size="2"/><br/>
          <span id="inf2">x?</span><br/>
          <input type="text" id="txt2" name="txt2" size="2"/><br/>
          x?
          <input type="checkbox" id="ckb" name="ckb" /><br/><br/>
          <input type="button" value="x" onclick="setaInf();">
        </td>
      </tr>

    </table>
    <br/>
    <span id="inf3"><small>*x</small></span>
  </center>
</form>

<div id="teste2">
  <form id="form3" name="form3" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="lol1" style="display: none;"></div>
  </form>
</div>

<br/><br/><br/>

<center>
  <div>
    <form id="form4" name="form4" method="post" action="#">
      <div id="lol" style="display: none;"></div>
    </form>
  </div>
</center>

I know the tag <center> was discontinued and according to references, the correct now would be to use the attribute css text-align:center; but even so I cannot reproduce the same effect, see the example below:

.table {
  max-width: 500px;
  border-collapse: collapse;
  font-size: 12;
  width: 320px;
  text-align: center;
  box-shadow: 2px 2px 2px 2px #aaa;
}

.table tr td{
  padding: 8px 8px 8px 8px;


}
.campo {
  border: 1px double black;
}

#teste {
  overflow: auto;
  max-height: 500px;
  max-width: 18ç0px;
  position:absolute;
  z-index:999; 
  left:0%; 
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

#teste2 {
  overflow: auto;
  max-height: 500px;
  max-width: 300px;
  position:absolute;
  z-index:999; 
  right:0%;
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

<div id="teste">
  <form id="form1" name="form1" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="div1" style="display: none;"></div>
  </form>
</div>

<div style='text-align:center;'>
  <h1>x</h1>
  <form id="form2" name="form2" method="post" action="#">
    <table class="table">
      <tr>
        <td class="campo">
          <span id="inf1">*x</span><br/>
          <input type="text" id="txt" name="txt" size="2"/><br/>
          <span id="inf2">x?</span><br/>
          <input type="text" id="txt2" name="txt2" size="2"/><br/>
          x?
          <input type="checkbox" id="ckb" name="ckb" /><br/><br/>
          <input type="button" value="x" onclick="setaInf();">
        </td>
      </tr>

    </table>
    <br/>
    <span id="inf3"><small>*x</small></span>
  </form>
</div>

<div id="teste2">
  <form id="form3" name="form3" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="lol1" style="display: none;"></div>
  </form>
</div>

<br/><br/><br/><br/><br/><br/>

<div style='text-align:center;'>
  <form id="form4" name="form4" method="post" action="#">
    <div id="lol" style="display: none;"></div>
  </form>
</div>

How do I center the two div´s of the first example without having to use the tag <center>?

Answer 1

The text-align only serves to align elements inline or inline-block. The Divs by default are blocks, so are not affected by this property. You can center a div horizontally by defining its left and right margins as auto. For example:

div {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  background: red;
  }

<div></div>

Answer 2

The style text-align: center; center the content within a block. In your case you didn’t center because you put the wrong style: text=align:center; where it should be text-align: center;.

To center the block (not its content), as is the example of your table, you should add another style: margin: 0 auto; or margin-left: auto; margin-right: auto;. Thus, the browser will calculate the right and left margin automatically to center the block.

Answer 3

I don’t know if I understand it very well but if you want to center Ivs on the screen you can add CSS margin:0 auto; in the div that will be aligned to the center.