How to Center Align Content inside DIV using CSS

To center align contents inside a <div> using CSS, you can use different approaches depending on your specific needs. I have shared three simple methods here.

1) Using Flexbox

This method is widely used because it's clean and works efficiently for centering both horizontally and vertically.

<style>
div {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;    /* Vertically center */
}
</style>

Try it

2) Using Text Alignment (for inline elements)

This works well for text or inline elements inside the <div>.

<style>
div {
    text-align: center;
}
</style>

3) Using Positioning (Absolute & Transform)

This method helps when centering the <div> itself within a parent container.

<style>
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

← PreviousNext →