Estou praticando html e quero deixar a pagina centralizada ... Porém não consigo, Quero deixar assim : https://ibb.co/dtDY3c Mesmo que a pessoa mude o zoom, fique no centro. Só que a minha esta ficando dessa forma : https://ibb.co/b7maGx
Estou praticando html e quero deixar a pagina centralizada ... Porém não consigo, Quero deixar assim : https://ibb.co/dtDY3c Mesmo que a pessoa mude o zoom, fique no centro. Só que a minha esta ficando dessa forma : https://ibb.co/b7maGx
Trabalhando com container, de forma que as divs ou outros componentes internos sejam alinhados ao centro. Para isso, iniciaremos criando um arquivo HTML com a estrutura apresentada
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
A div com classe container tem elemento principal do nosso layout, pois conterá as formatações via CSS para centralizar o seu conteúdo. Esse resultado pode ser obtido ao inserirmos, abaixo da linha
a tag
<title>Document</title>
a
tag <style>
com o código CSS
<style>
.container {
width: 100vw;
height: 100vh;
background: #6C7A89;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
.box {
width: 300px;
height: 300px;
background: #fff;
}
body {
margin: 0px;
}
</style>