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

# CSS code - Absoulte way
    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: Logo

You are commenting using your 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