By bsr


2013-09-26 11:22:41 8 Comments

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

10 comments

@Asiya Fatima 2018-09-28 05:58:28

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

@Asiya Fatima 2018-09-28 06:02:14

this properties can perfectly to center .align-items which center vertically and justify-content which center horizontally

@Polar 2018-11-13 02:27:54

diplay: flex; for it's container and margin:auto; for it's item works perfect.

NOTE: You have to setup the width and height to see the effect.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>

@MelanieP 2018-02-25 22:05:41

1 - Set CSS on parent div to display: flex;

2 - Set CSS on parent div to flex-direction: column;
Note that this will make all content within that div line up top to bottom. This will work best if the parent div only contains the child and nothing else.

3 - Set CSS on parent div to justify-content: center;

Here is an example of what the CSS will look like:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@Michael_B 2015-10-10 01:06:34

How to Center Elements Vertically and Horizontally in Flexbox

Below are two general centering solutions.

One for vertically-aligned flex items (flex-direction: column) and the other for horizontally-aligned flex items (flex-direction: row).

In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.

Here's the HTML for both:

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

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (excluding decorative styles)

When flex items are stacked vertically:

#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: 300px;
}

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

enter image description here

DEMO


When flex items are stacked horizontally:

Adjust the flex-direction rule from the code above.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

enter image description here

DEMO


Centering the content of the flex items

The scope of a flex formatting context is limited to a parent-child relationship. Descendants of a flex container beyond the children do not participate in flex layout and will ignore flex properties. Essentially, flex properties are not inheritable beyond the children.

Hence, you will always need to apply display: flex or display: inline-flex to a parent element in order to apply flex properties to the child.

In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

More details here: How to vertically align text inside a flexbox?

Alternatively, you can apply margin: auto to the content element of the flex item.

p { margin: auto; }

Learn about flex auto margins here: Methods for Aligning Flex Items (see box#56).


Centering multiple lines of flex items

When a flex container has multiple lines (due to wrapping) the align-content property will be necessary for cross-axis alignment.

From the spec:

8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

More details here: How does flex-wrap work with align-self, align-items and align-content?


Browser support

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.


Centering solution for older browsers

For an alternative centering solution using CSS table and positioning properties see this answer: https://stackoverflow.com/a/31977476/3597276

@kapil 2017-02-28 12:28:20

can we do it horizontally right, left and vertically center?

@Michael_B 2017-02-28 12:54:20

@kapil, adjust the justify-content property to space-between or space-around... jsfiddle.net/8o29y7pd/105

@SeaWarrior404 2017-11-10 09:33:50

This answer should be up on top. Using Flex should be the preferred way for doing this, since it scales nicely across devices and screen. Its far more easier than using floats and managing multiple divs adhere to that.

@Hemanth SP 2019-03-14 12:02:39

Ie 11 is not working properly horizontal and vertical center

@Michael_B 2019-03-14 16:46:32

@HemanthSP, post a question with details.

@Aksana Tolstoguzova 2017-04-20 18:52:47

margin: auto works perfect with flexbox. It centralize vertically and horizontally.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>

@ben 2017-04-12 13:06:27

Add

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

to the container element of whatever you want to center. Documentation: justify-content and align-items.

@Jeff Ward 2017-05-11 21:51:02

Thanks for the succinct answer. While all the verbiage above is fine, these 3 lines is exactly what I arrived here looking for (well, display: inline-flex in my case, but that was an easy edit.)

@Leo 2017-03-04 17:47:13

If you need to center a text in a link this will do the trick:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

@Zoltán 2017-03-19 20:11:44

Sweet! Sometimes I feel that I'm too dump for Flexbox .) Suppose I need more practice, some of its logic is still unclear. Thanks, Leo!

@Marc Audet 2013-09-26 12:13:04

I think you want something like the following.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

See demo at: http://jsfiddle.net/audetwebdesign/tFscL/

Your .flex-item elements should be block level (div instead of span) if you want the height and top/bottom padding to work properly.

Also, on .row, set the width to auto instead of 100%.

Your .flex-container properties are fine.

If you want the .row to be centered vertically in the view port, assign 100% height to html and body, and also zero out the body margins.

Note that .flex-container needs a height to see the vertical alignment effect, otherwise, the container computes the minimum height needed to enclose the content, which is less than the view port height in this example.

Footnote:
The flex-flow, flex-direction, flex-wrap properties could have made this design easier to implement. I think that the .row container is not needed unless you want to add some styling around the elements (background image, borders and so on).

A useful resource is: http://demo.agektmr.com/flexbox/

@cimmanon 2013-09-26 14:32:38

Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).

@Marc Audet 2013-09-26 14:57:51

@cimmanon I agree about with you about block level, and I edited my post accordingly. Block level is not required for alignment but may be needed if the user wants to specify height and so on. I took liberty about the browser prefixes, I just assumed a perfect browser for the sake of arriving at a working demo. Thank you again for your comment, appreciate the feedback.

@Brian Gates 2014-09-04 20:00:10

If it overflows, it crops the top. i.imgur.com/3dgFfQK.png Any way to avoid this?

@Marc Audet 2014-09-05 11:38:58

@BrianGates If the height of the window is too short, how do you want the 4 elements to be displays, 2x2, 1x4?

@Brian Gates 2014-09-05 22:19:45

@CodeFinity 2017-04-12 13:32:53

Thorough answer, but is it necessary to put all of the vendor prefixes. Perhaps brevity is a consideration here.

@Marc Audet 2017-04-12 14:07:10

@VisWebsoft When I posted the answer in 2013, vendor prefixes were a good idea, but in 2017, flex has pretty good support so it is not as critical, it really depends on the audience you are expecting (how old their browsers are, for example).

@AmerllicA 2017-09-13 04:50:43

Awesome answer, It solve my deep question, thanks a lot. flex-direction force display: flex; element to have inverse behaviour with align-items and justify-content.

@Marconi 2015-12-01 17:58:55

Using CSS+

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

take a look HERE

@bungleofsketches 2015-12-08 16:58:45

since this is easily and widely supported by modern browsers with pure flexbox your library solution is surely not necessary. Especially since he asked how to do it using flex box not a css library.

@QMaster 2014-06-14 12:02:49

Don't forgot to use important browsers specific attributes:

align-items: center; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: center; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

You could read this two links for better understanding flex: http://css-tricks.com/almanac/properties/j/justify-content/ and http://ptb2.me/flexbox/

Good Luck.

@Pete Kozak 2014-07-17 12:24:16

this is a good point, for today (to support only the newest browsers) you just need the last two lines -webkit.. for safari and the last one for all the others

@benebun 2014-09-24 15:58:40

+1 because old 2009 and March 2012 working drafts still have significant user share (combined about 8% according to caniuse.com).

@user3378649 2015-01-25 06:38:50

Flext doesn't work in safari, how could u solve that problem ?

@QMaster 2015-01-25 13:47:19

I checked the last version of safari on windows many days ago and I don't remember it very well, but I'll check and will say you. Just please tell me what version of safari did you mean? and on which OS?

@QMaster 2016-10-04 18:47:43

@user3378649 Latest safari version could support Flex-box, Please see this link: caniuse.com/#search=flexbox

@QMaster 2016-10-04 18:50:38

Related Questions

Sponsored Content

96 Answered Questions

[SOLVED] How to horizontally center a <div>?

42 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

23 Answered Questions

[SOLVED] vertical-align with Bootstrap 3

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

24 Answered Questions

[SOLVED] Vertically centering a div inside another div

  • 2011-06-27 08:22:03
  • user700284
  • 540811 View
  • 491 Score
  • 24 Answer
  • Tags:   html css html5 css3

24 Answered Questions

[SOLVED] Flex-box: Align last row to grid

4 Answered Questions

23 Answered Questions

[SOLVED] CSS center text (horizontally and vertically) inside a div block

  • 2011-04-18 13:22:47
  • Satch3000
  • 1502234 View
  • 679 Score
  • 23 Answer
  • Tags:   html css

20 Answered Questions

[SOLVED] Vertically align text next to an image?

1 Answered Questions

flexbox align center vertical and horizontal not working properly

Sponsored Content