Align an element of a div to the center

How to center a div element vertically and horizontally?

Last updated:7/20/2021 1:07:01 AM

1 Answers

Ethan Karla
Ethan Karla

You can easily an element of a div using display-flex property.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Let's understand it with the help of an example :

<!DOCTYPE html>

<html lang ='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Flexbox</title>
    <style>
        body {
            margin-left: 30%;
            margin-right: 30%
        }
        .d-flex {
            display: flex;
        }
        .justify-content-center {
            justify-content: center;
        }
        #square {
            width: 100px;
            height: 100px;
            background : black;
        }
        .flex-column {
            flex-direction: column;
        }
        .align-items-center {
            align-items: center;
        }
    </style>
</head>
<body>
    <div class='d-flex justify-content-center flex-column align-items-center'>
        <h3>Flexbox Property</h3>
        <p>This paragraph and below square will be centered</p>
        <div id='square'></div>
    </div>
</body>
</html>

Hope this information will be helpful for you.

Happy Coding!

Answer