Center DIV [duplicate]

Question

Center DIV [duplicate]

Navigation

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

0

How do I centralize this div:

.centralizar {
   width: 80%;
   background: #fff;
}

css css3 twitter-bootstrap

asked by anonymous 15.09.2016 / 01:53

2 answers

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>

15.09.2016 / 02:05

Lock and unlock editing of an EditText Error creating a simple table in Oracle SQL Developer

score 3 · Accepted Answer

It will depend a little on the type of centering 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>