How to center div horizontally and vertically using flexbox?


How can I move any div to center vertically and horizontally, using Flexbox? I don't want to use position property or float, I am looking to use flex css properties to center elements vertically and horizontally.


Asked by:- bhanu
1
: 2711 At:- 1/7/2022 4:22:25 PM
CSS flexbox center div







2 Answers
profileImage Answered by:- vikas_jk

To center a div vertically and horizontally using flexbox, you need to wrap the div or div's inside a container with properties 'display: flex; flex-direction: column; justify-content: center;align-items: center;', then just make the div 'text-align: center;' if it has text.

Here is the complete example

<div id="mainContainer"><!-- flex container -->

    <div class="box"><!-- flex item -->
        <p>Some Text</p>
    </div>

</div>

and CSS for it will be as below

#mainContainer {
    display: flex; /* establish flex container */
    flex-direction: column; /* make main-axis vertical */
    justify-content: center; /* align items vertically, in this case */
    align-items: center; /* align items horizontally, in this case */
    height: 300px; 
}

Output will be like this

center-horizontally-vertically-flexbox-min.png

Here is the working fiddle

https://jsfiddle.net/c4td0hqx/

Thanks

You can also take a look on following links which may be helpful

Responsive center image using pure CSS or Bootstrap 3/4

How to use vertically align : middle text, next to image using CSS?

2
At:- 1/7/2022 4:39:21 PM
Excellent and easy answer thanks. 0
By : bhanu - at :- 1/19/2022 10:40:23 AM


profileImage Answered by:- neena

We can use flexbox to center div vertically and horizontally considering the below details:

  • we can use 'justify-content: center; align-items: center;' to center flex div's
  • for vertically-stacked flex items, we can use, flex-direction: column to place them in center
  • for horizontally-stacked flex items, we can use flex-direction: row  to place them in center
  • In both cases, the height of the centered divs can be variable, undefined, unknown.

So, here is the demo when items are vertically stacked

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 200px;
}

.divs {
    width: 200px;
    margin: 5px;
    color:white;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}
#redbox{
  background-color:red;
}
#bluebox{
  background-color:blue;
}

HTML

<div id="container"><!-- flex container -->

    <div class="divs" id="bluebox"><!-- flex item -->
        <p>First Div</p>
    </div>

    <div class="divs" id="redbox"><!-- flex item -->
        <p>Second Div</p>
    </div>

</div>

Output:

center-div-flexbox-min.png

Fiddle

For Horizontal div's considering the above HTML and given points, we can have below CSS

#container {
    display: flex;           /* establish flex container */
    flex-direction: row;  /* make main axis horizontal, CHANGE HERE REST IS SAME */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 200px;
}

.divs {
    width: 200px;
    margin: 5px;
    color:white;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

Output:

center-flexbox-new-min.png

Fiddle

Hope it helps.

1
At:- 2/23/2022 11:02:48 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use