Wpis z mikrobloga

Mircy gdzie robie blad z flexem?Chce wysrodkowac header na stronie w pionie i poziomie. Html to po prostu tylko header.
body
{
margin: 0;
padding: 0;
background-color: #001322;
height: 100vh;
}

header{
width:100px;
height: 100px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}

mimo tego kwadrat jest przyklejony do roku ekranu

#webdev #programowanie #css #html #javascript
  • 4
  • Odpowiedz
@mlotek123: Pan @escapism dobrze mówi. justify-content: center; i align-items: center; to są wartości dziedziczone przez dziecko headera. Jeśli chcesz wyśrodkować w taki sposób headera użyj align-self: center; o ile się nie mylę.
  • Odpowiedz
@mlotek123: Czyli:
body
{
margin: 0;
padding: 0;
background-color: #001322;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

header{
width:100px;
height: 100px;
background-color: red;
}

Albo tak:

body
{
margin: 0;
padding: 0;
background-color: #001322;
height: 100vh;
display: flex;
}

header{
width:100px;
height: 100px;
background-color: red;
margin:auto;
}
  • Odpowiedz