Flexbox: center horizontally and vertically

Html Css Flexbox

If you want to center a div horizontally and vertically within a container using flexbox, you can achieve this by following a few simple steps.

Step 1: Set Up the Container

First, you need to set up the container element. In your HTML, create a div and give it a class name (e.g. "container").


                <div class="container">
                    ...
                </div>

Step 2: Apply Flexbox Styles to the Container

Next, apply the following CSS styles to the container:


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

The display: flex; property tells the container to use flexbox layout. The align-items: center; property centers the child elements vertically, and the justify-content: center; property centers the child elements horizontally.

Step 3: Add Child Elements

Now you can add your child elements (in this case, the numbers) inside the container div. Each child element will be centered both horizontally and vertically within the container.


                <div class="container">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    ...
                </div>

Note: If you want the child elements to be displayed in rows, you can apply the flex-direction: column; property to the container:


                .container {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }

Example

Here's an example of how the HTML and CSS code would look:


                <div class="container">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </div>

Related Questions