Keep elements horizontally and vertically in center

In UI/UX world, sometimes we are facing with elements with unknown width and height, so here is the way to keep an element horizontally and vertically in center!

# HTML code
<parent>
    <child>Some text to show always in center!</child>
</parent>
# CSS code - Flex way
parent{ 
    position: flex; 
    width: 100%;     
    height: 100%;
    align-items: center;
    justify-content: center;
} 
parent child{ 
    width: 50px;
    height: 50px;
}


# CSS code - Absoulte way
parent{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
parent child{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
}
Posted in CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s