Alinhamento Horizontal e Vertical do CSS

Elemento centralizado

Elementos centralizados horizontal e verticalmente

Centralizar elemento

Para centralizar um bloco de elementos (por exemplo, <div>), use margem: auto;.

Configurar a largura do elemento impedirá que ele se estenda até os limites do contêiner.

Em seguida, o elemento ocupará a largura especificada, e o espaço restante será distribuído uniformemente entre as margens laterais externas:

Este elemento div está centralizado.

Exemplo

.center {
  margem: auto;
  largura: 50%;
  border: 3px sólido verde;
  padding: 20px;
}

Experimente você mesmo

Atenção:Se não for configurado largura propriedade (ou configure-a para 100％), o alinhamento central não será válido.

Centralizar texto

Se desejar centralizar apenas o texto dentro do elemento, use text-align: center;:

Este texto está centralizado.

Exemplo

.center {
  text-align: center;
  border: 3px sólido verde;
}

Experimente você mesmo

Dica:Para mais exemplos de como alinhar texto, consulte Texto do CSS Este capítulo.

Centralizar imagem

Se precisar centralizar uma imagem, defina as margens laterais externas. autoe definí-lo como um elemento de bloco:

Exemplo

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Experimente você mesmo

Alinhamento esquerda e direita - usar position

Uma maneira de alinhar elementos é usar position: absolute; :

Este div está alinhado à direita.

Exemplo

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Experimente você mesmo

Atenção:Elementos absolutamente posicionados serão removidos do fluxo normal e podem sobrepor outros elementos.

Alinhamento esquerda e direita - usar float

Outra maneira de alinhar elementos é usar float Atributo:

Exemplo

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Experimente você mesmo

Atenção:Se um elemento for mais alto que o elemento que o contém e estiver flutuando, ele sairá do contêiner. Você pode usar hack de clearfix para resolver esse problema (veja os exemplos abaixo).

Hack de clearfix

Então podemos adicionar ao elemento contendo overflow: auto;Para resolver esse problema:

Exemplo

.clearfix {
  overflow: auto;
}

Experimente você mesmo

Alinhamento vertical - usar padding

Existem muitos métodos para alinhar verticalmente elementos em CSS. Uma solução simples é usar a margem superior e inferior:

Eu estou centralizado verticalmente.

Exemplo

.center {
  padding: 70px 0;
  border: 3px sólido verde;
}

Experimente você mesmo

Para alinhar vertical e horizontalmente ao mesmo tempo, use padding e text-align: center;:

Eu estou alinhado horizontal e verticalmente.

Exemplo

.center {
  padding: 70px 0;
  border: 3px sólido verde;
  text-align: center;
}

Experimente você mesmo

Alinhamento vertical - usar line-height

Outra técnica é usarseu valorigual a height O valor do atributo line-height Atributo:

Eu estou alinhado horizontal e verticalmente.

Exemplo

.center {
  line-height: 200px;
  height: 200px;
  border: 3px sólido verde;
  text-align: center;
}
/* Se houver múltiplas linhas de texto, adicione o seguinte código: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Experimente você mesmo

Alinhamento vertical - usar position e transform

Se sua escolha não for padding e line-heightSe o outro for position e transform Atributo:

Eu estou alinhado horizontal e verticalmente.

Exemplo

.center { 
  height: 200px;
  position: relative;
  border: 3px sólido verde; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Experimente você mesmo

Dica:Você vai no Transformações 2D Você aprenderá mais sobre a propriedade transform neste capítulo.

Alinhamento vertical - Usando Flexbox

Você também pode usar flexbox para centralizar o conteúdo. Observe que o IE10 e versões anteriores não suportam flexbox:

Eu estou alinhado horizontal e verticalmente.

Exemplo

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px sólido verde; 
}

Experimente você mesmo

Dica:Você vai no meu Flexbox CSS Você aprenderá mais sobre Flexbox neste capítulo.