Como posso centralizar um container? [Resolvido]


(Guilherme) #1

Boa tarde,

Como posso centralizar esse container (box azul) no centro da página? como vocês podem ver ele está colado no topo :confused:

css do container:

.container { 
  margin: 0 auto;
  width: 1170px;
  height: 800px;
  background: #6C7A89;
}

(Rafael França Marques da Silva) #2

isso te ajuda: http://codepen.io/euconectei/pen/oZxLxj?


(Guilherme) #3

perfeito, amigo! vou estudar cada linha.

muito obrigado :smiley:


(Maurício Pessoa S.) #4

Com este CSS você obteria o mesmo resultado:

.container {
    position: absolute;
    width: 1170px;
    height: 800px;
    top: 50%;
    left: 50%;
    margin-top: -400px; /* height(800)/2 */
    margin-left: -585px; /* width(1170)/2 */
    background: #6C7A89;
}

:wink:


(sergio) #5

@mauriciops ssim também da certo, apesar de preferir usar o Flex para futuramente poder colocar mais elementos mas é uma maneira também! Apenas por compartilhar também tem estes que é mais fácil que dividir o tamanho da altura x largura..

.container {
position: absolute;
width: 1170px;
height: 800px;
top: 0;
bottom:0;
left: 0;
right: 0;
margin:auto;
background: #6C7A89;
}

.container {
position: absolute;
width: 1170px;
height: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #6C7A89;
}


(Guilherme) #6

muito obrigado, vou salvar e fazer os testes :smiley:


(Guilherme) #7

vlwww irmão, já estou testando aqui :wink:


(Luan Maik) #8

A utilização correta foi a apresentada pelo amigo @euconectei, o resto é gambiarra.
Acho muito importante os desenvolvedores front-end começarem a estudar e usar o flex-box, pois evita muuuuuuuuuuuuuuuuuita gambiarra, que antes dele existir era "aceitável".