How to center a div vertically or horizontally or both

Center a div! Don’t worry, it will never be a difficult CSS anymore! Most of the beginners do fail to put that div center vertically or horizontally or both! Damn even it was harder for me in the beginning. Well, practice makes man perfect and experience makes it like a spark.

As a fresher a few years back I was sweating when the boss stood next to me and said put that image exact center to the full width and height of screen! Even I tried too many hacks to put that div center. The most difficult part was to put the image in the center!! But now I feel options are like flood. Many ways to put those HTML elements in the center either vertically or horizontally or both.

I will be going through one by one.

Center a div with margin auto (Horizontal)

This is the simplest method to center any block element with a specific width. This method does not require any parent element. It is completely independent.

CSS

center-me{
    margin:0 auto;
    width:150px;
    height:150px;
}

HTML

<div class="center-me"></div>

Center a div with text-align Center (Horizontal)

This method is usually used for inline elements, which also works with block elements with a specific width. It is easy to put all the inline elements and make them center. For example buttons, nav items, labels, badges, etc,.

CSS

.center-me {
    text-align: center;
}

HTML

<div class="center-me">
    <button type="button">Button</button>
    <button type="button">Button</button>
    <button type="button">Button</button>
    <button type="button">Button</button>
</div>

So now all the buttons will be in the center. Easy right!
similarly, all the elements going inside .center-me will be in the center.

Center a div with positions (Both vertical and horizontal)

This is one of the method which i used frequently in most of the projects until flex box introduced. But still i use this reqularly.
This method need one parent element to put the child center.

CSS

.center-me {
    position:relative;
}

<!-- This is for both horizontal and vertical -->
.center-child{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

<!-- This is for horizontal -->
.center-child-horizontal{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

<!-- This is for vertical -->
.center-child-vertical{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

HTML

<div class="center-me">
    <div class="center-child">
        <!-- Anything here will become centered -->
    </div>
</div>

Example: Now i’m trying to put an icon inside a circle with this method

.circle{
    height:100px;
    width:100px;
    background:#fff;
    border-radius:100%;
    border:1px solid #ddd;
    position:relative;
}
.circle-icon{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

Center a div using flexbox

This is a new update from CSS, flexbox works either vertically or horizontally. But don’t worry we can center both or either one of them.

Below code centers the child element both vertically or horizontally. This is the easiest method I have come across in the CSS.

.center-me{
    display:flex;
    justify-content:center;
    align-content:center;
}

Or

.center-me{
    display:flex;
    place-items:center;
}

<div class="center-me">
    <span>This will display in center of the parent element</span>
</div>

Note: If you have multiple elements in the block then it is a good idea to wrap all of them in a div.

<div class="center-me">
    <div> <!-- This will be center -->
        <h1>Header</h1>
        <button>Centered elements</button>
    </div>
</div>