4 Easy ways to center a DIV in pure CSS

There are many ways to center a div in pure CSS, but it all boils down to knowing the height of the element being positioned and the browser versions you want to target that should support it. I always go to Can I use and search for the feature I’m thinking of relying on to make sure it’s safe for the browsers I’m targeting.

The DIV will be placed in the center of the page using these CSS Snippets. The DIV is horizontally and vertically centered without the need for any CSS framework, jQuery, or JavaScript.

Using the Flex property

 .flexbox{

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

 }

Example code

<div style="background:#000; display: flex; align-items: center; justify-content: center; width: 100%; height: 300px; border-radius:5px;">
    <div style="background:#ff6148; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
        <strong>FLEX</strong>
    </div>
</div>

Center a DIV using grid property in CSS

 .grid {

    display: grid;
    place-items: center;

 }

Example code for display:grid;

<div style="background:#000; display: grid; place-items: center; width: 100%; height: 300px; border-radius:5px;">
    <div style="background:#ff6148; display: grid; place-items: center;  width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
        <strong>GRID</strong>
    </div>
</div>

Center a DIV using margins

 .margins {

    display:grid;
    margin:auto;

 }

Example code

<div style="background:#000; display: grid; margin:auto; width: 100%; height: 300px; border-radius:5px;">
    <div style="background:#ff6148; display: grid; margin:auto; width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
        <strong style="display: grid; margin:auto;">MARGIN</strong>
    </div>
</div>

Using Absolute and Relative Position

 .outer-div {
    position:relative;
    width:100%;
 }
 .outer-div .child-div {
    position:absolute;
    top:50%;
    left:50%;
    transform: translateY(-50%);
 }

Example code

 <div style="background:#000; position:relative; width:100%; height: 300px; border-radius:5px;">
        <div style="background:#ff6148; position:absolute; transform: translate(-50%,-50%); top:50%; left:50%; width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
            <strong style="position:absolute; transform: translate(-50%,-50%); top:50%; left:50%;">POSITION</strong>
        </div>
    </div>

Center a div only vertically

 .outer-div {
    display: grid;
 }
 .inner-div {
    margin-top:auto;
    margin-bottom:auto;
 }

Example code

<div style="background:#000; display: grid;  width: 100%; height: 300px; border-radius:5px;">
    <div style="background:#ff6148; display: grid; margin-top:auto; margin-bottom:auto; width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
        <strong style="display: grid; margin:auto;">MARGIN</strong>
    </div>
</div>

Center a div only Horizontally

Example code

<div style="background:#000; display: grid;  width: 100%; height: 300px; border-radius:5px;">
    <div style="background:#ff6148; display: grid; margin-left:auto; margin-right:auto; width: 100px; height: 100px; color:aliceblue; border-radius:5px;">
        <strong style="display: grid; margin:auto;">MARGIN</strong>
    </div>
</div>

That’s it. these are some examples to Center a DIV in Pure CSS vertically and horizontally.

Read More: How to center a div in Tailwind CSS? OR How to center a div in Bootstrap 5?