Skip to content
OverviewSolutions
16
Comments
1
João P. Kiyoshi
@jpkiyoshi

All comments

  • João P. Kiyoshi•200
    @jpkiyoshiPosted over 1 year ago

    Great work, Daniel! Setting margin: auto doesn't work when trying to vertically center an element (I think it only works with elements with display: absolute and inset: 0) . A simple way to do that is to make sure the parent element has a height set and then utilize display: flex alongside align-items: center also on the parent. (you can also not use margin: auto and instead use justify-content: center to center horizontally as well). Here's an example:

    body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    You can also use grid to center:

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    Hopefully this answers your question!

    Marked as helpful
    0