Centralize DIV

Asked

Viewed 23,084 times

0

How do I center this div :

inserir a descrição da imagem aqui

.centralizar {
   width: 80%;
   background: #fff;
}
css twitter-bootstrap css3

2 answers

4


It will depend a little on the type of centralization you want. I’ll put some examples here.

Centralization with margin

.center1 {
  margin: auto;
  width: 80%;
  background: #fff;
  border: 3px solid #73AD21;
  padding: 10px;
}
  
<h2>Alinha Elementos no Centro</h2>
<p>Para centralizar um elemento verticalmente, use margin: auto;</p>

<div class="center1">
  <p><b>Observação: </b>O margin:auto não funciona no IE8 a menos que um !DOCTYPE esteja declarado.</p>
</div>

Centralization with text-align

.center2 {
  text-align: center;
  border: 3px solid green;
}
<h2>Centraliza Texto</h2>

<div class="center2">
  <p>Texto centralizado</p>
</div>

Vertical alignment with padding

.center3 {
  padding: 70px 0;
  border: 3px solid green;
}
<h2>Centralizando Verticalmente</h2>
<p>Usamos padding para centralizar a div vericalmente:</p>

<div class="center3">
  <p>Estou verticalmente centralizada.</p>
</div>

Central alignment with padding and text-align

.center4 {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
   
  

<h2>Centralizando verticalmente e horizontalmente</h2>
<p>Usamos padding e text-align para centralizar vertical e horizontalmente:</p>

<div class="center4">
  <p>Estou vertical e horizontalmente centralizada.</p>
</div>

Centralization with line-height

 
.center5 {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
<h2>Centralizando com Line Height</h2>
<p>Usamos line-height com um valor que é igual a propriedade height, para centralizar o elemento:</p>

<div class="center5">
  <p>Estou vertical e horizontalmente centralizada com line-height.</p>
</div>

Centralization with position and transform

.center6 {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h2>Centralizando com position e transform</h2>
<p> Mostra como centralizar de forma horizontal e vertical usando positioning e transform:</p>

<div class="center6">
  <p>Estou alinhada vertical e horizontalmente.</p>
</div>

<p>Obs: O transform não é suportado no IE8 e versões anteriores a ele.</p>

  • A great answer Diéfani, only that I recommend paying attention to the answers already existing in older questions so that the content is not spread, this type of question has been asked several times, I marked the question as duplicate of this http://en.stackoverflow.com/q/806/3635 but did not have time to close it, so I ask you to support the questions already answered by marking the duplicates and avoiding answering them, thank you ;)

1

You can follow this example : 

body{
width: 100%;
height: 100%;
  background: #006633;
}
.centralizar {
   width: 80%;
   background: #fff;
   margin: 0 auto;
text-align:center;
}
<body>
    <div class="centralizar">Centro !</div>
</body>

  • A great answer Magichat, only that I recommend paying attention to the answers already existing in older questions so that the content is not spread, this type of question has been asked several times, I marked the question as duplicate of this http://en.stackoverflow.com/q/806/3635 but did not have time to close it, so I ask you to support the questions already answered by marking the duplicates and avoiding answering them, thank you ;)

Browser other questions tagged css twitter-bootstrap css3

You are not signed in. Login or sign up in order to post.