Skip to content
OverviewSolutions
10
Comments
1
rfcho322
@rfcho322

All comments

  • Zubair Adham•400
    @atmahanaSubmitted over 1 year ago

    I always found it difficult to center element inside a div.

    display: flex;
align-items: center;
justify-content: center;

    Sometimes this code block would work. But sometimes it fails to center any element. In this particular case, when centering the card container in the main body. I did put the property block above in my parent container but it doesn't work. Did some research and asking for help from other friend, and come up with this solution

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

    What is the best practice for centering an element inside a div?

    In which situation I should use the first code block and the second code block in my code?

    QR Code Component

    5
    rfcho322•220
    @rfcho322Posted over 1 year ago

    Hi Zubair Adham, congratulations on completing the challenge

    • This block of code is working, it should center vertically and horizontally, you just can't see it because the container where you use this is not taking the full height of its parent.
    display: flex;
align-items: center;
justify-content: center;
    • This is one is working because you specified a height
    body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}
    • In order for flex to work, so, on your card-container class, do this instead
    body{
height: 100vh;
}
.card-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
    Marked as helpful
    1