9.1 Centralização horizontal
Centralizar elementos em uma página web é uma das tarefas principais do web design. Isso ajuda a criar layouts esteticamente agradáveis e fáceis de ler. Abaixo, vamos ver várias maneiras de centralizar elementos horizontalmente e verticalmente usando técnicas modernas de CSS.
1. Centralizando elementos de bloco com margin: auto
Uma das maneiras mais simples de centralizar elementos de bloco é usar margin: auto.
Exemplo:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Explicação do código:
margin: 0 auto;: aplica margens automáticas à esquerda e à direita, centralizando o elemento horizontalmente
2. Centralizando elementos inline usando text-align
Para centralizar elementos inline ou embutidos dentro de um elemento de bloco, é possível usar a propriedade text-align: center.
Exemplo:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Elemento Inline</div>
</div>
Explicação do código:
text-align: center;: centraliza os elementos inline dentro de um container de bloco
3. Centralizando elementos com Flexbox
O Flexbox oferece uma maneira flexível e simples de centralizar elementos tanto horizontalmente quanto verticalmente.
Exemplo:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explicação do código:
display: flex;: define o container como Flexboxjustify-content: center;: centraliza elementos horizontalmentealign-items: center;: centraliza elementos verticalmente (será discutido em mais detalhes a seguir)
9.2 Centralização vertical
1. Centralização usando Flexbox
O Flexbox oferece uma maneira simples de centralizar elementos verticalmente.
Exemplo:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explicação do código:
align-items: center;: centraliza elementos verticalmente
2. Centralização usando CSS Grid
O CSS Grid oferece recursos poderosos para centralizar elementos:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Explicação do código:
display: grid;: define o container como CSS Gridplace-items: center;: centraliza elementos horizontalmente e verticalmente
3. Centralização vertical usando posicionamento absoluto e transformação CSS
O uso de posicionamento absoluto e transformação CSS permite centralizar elementos verticalmente.
Exemplo:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Explicação do código:
position: absolute;: define o elemento como posicionado de forma absoluta em relação ao containertop: 50%;,left: 50%;: desloca o elemento 50% da borda superior e esquerda do containertransform: translate(-50%, -50%);: desloca o elemento em 50% de sua largura e altura para centralizá-lo
4. Centralização vertical usando tabela e células
Usando uma tabela e células para centralizar elementos verticalmente.
Exemplo:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Elemento Centralizado</div>
</div>
</div>
Explicação do código:
.table-container: cria um container com displaytable.table-cell: cria uma célula de tabela com alinhamento verticalmiddle
GO TO FULL VERSION