Position DIV in the center of the page

Question

Position DIV in the center of the page

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

1

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

ThecodeI'musingisthis:

.fundo{background-color:rgba(10,23,55,0.7);padding:20px;margin:200pxauto;}<divclass="col-md-12 fundo" align="center"> 
    <button class="btn btn-primary">ACESSO CONSULTOR</button>
    <button class="btn btn-primary">ACESSO GERENTE</button>
 </div>

html5 css css3

asked by anonymous 23.11.2017 / 14:57

3 answers

Calling an asynchronous and synchronous method Transform DD / MM / YY into PHP timestamp

score 3 · Answer 1

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

#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 the logic horizontally 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>

score 2 · Answer 2

There are several techniques, the two that I like the most are the ones I'm going to 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, this one I think is very good, because it uses display:flex and you can make margin:auto work both 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

score 0 · Answer 3

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

.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>