Position DIV in the center of the page

Question

How do I align the div with black and transparent background where it contains the buttons in the center of the page independent of the monitor resolution?

The code I’m using is this:

.fundo{
    background-color: rgba(10,23,55,0.7);
    padding: 20px;
    margin: 200px auto;
}

<div class="col-md-12 fundo" align="center"> 
    <button class="btn btn-primary">ACESSO CONSULTOR</button>
    <button class="btn btn-primary">ACESSO GERENTE</button>
 </div>

Answer 1

Modern times

It is currently possible to do this much more simply using flex-box, example:

.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-box {
  background-color: yellow;
  height: 300px;
}

.content-box {
  background-color: black;
  color: white;
  text-align: center;
  width: 200px;
}

<div class="flex-box container-box">
  <div class="content-box">Conteúdo alinhado<br> verticalmente</div>
</div>

---

Old times

To align an element vertically in the center of the screen, only with CSS it needs to have fixed height, example:

#centro {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align:center;
  background-color: rgba(10,23,55,0.7);
  color: white;
  
  /* pura mágica */
  position: absolute;
  top: 50%; /* posiciona na metade da tela */
  margin-top: -25px; /* e retrocede metade da altura */
}

<div id="centro">Hello World</div>

To align horizontally the logic is the same:

#centro {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align:center;
  background-color: rgba(10,23,55,0.7);
  color: white;
  
  /* pura mágica */
  position: absolute;
  top: 50%; /* posiciona na metade da tela */
  margin-top: -25px; /* e retrocede metade da altura */
  left: 50%; /* posiciona na metade da tela */
  margin-left: -100px; /* e retrocede metade da largura */
}

<div id="centro">Hello World</div>

Answer 2

There are several techniques, the two that I like the most are the ones I will quote because they do not depend on fixed size.

Technique 1 with transform:translate

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: url(https://www.placecage.com/c/500/500) no-repeat center;
    background-size: cover;
}
.centro {
    height: 100px;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.conteudo {
    height: 50px;
    width: 50px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="centro">
    <div class="conteudo"></div>
</div>

Technique 2, I think this is very good, because it uses display:flex and you can do the margin:auto function both in width and height!

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0;
    padding: 0;
    background: url(https://www.placecage.com/c/500/500) no-repeat center;
    background-size: cover;
}
.centro {
    margin: auto;
    background-color: rgba(0, 0, 0, .5);
    height: 100px;
    width: 100%;
    display: flex;
}
.conteudo {
    height: 50px;
    width: 50px;
    background-color: red;
    margin: auto;
}

<div class="centro">
    <div class="conteudo"></div>
</div>

[]s

Answer 3

First, in this background photo, set its size in width 100%.

Next:

.fundo{
background-color: rgba(10,23,55,0.7);
margin: auto;
}

<div class="col-md-12 fundo" align="center"> 
<button class="btn btn-primary">ACESSO CONSULTOR</button>
<button class="btn btn-primary">ACESSO GERENTE</button>
</div>