Flexbox center horizontally and vertically

Question

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    x000D   x000D   flex-container   x000D    padding  0  x000D    margin  0  x000D    list-style  none  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    x000D  row   x000D    width  100   x000D    x000D   flex-item   x000D    background  tomato  x000D    padding  5px  x000D    width  200px  x000D    height  150px  x000D    margin  10px  x000D    line-height  150px  x000D    color  white  x000D    font-weight  bold  x000D    font-size  3em  x000D    text-align  center  x000D    x000D   lt div class  flex-container  gt  x000D     lt div class  row  gt  x000D       lt span class  flex-item  gt 1 lt  span gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt span class  flex-item  gt 2 lt  span gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt span class  flex-item  gt 3 lt  span gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt span class  flex-item  gt 4 lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   codepen io anon pen zLxBo

User · Accepted Answer

I think you want something like the following.

_x000D_

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

_x000D_

<div class="flex-container">_x000D_
    <div class="row"> _x000D_
        <div class="flex-item">1</div>_x000D_
        <div class="flex-item">2</div>_x000D_
        <div class="flex-item">3</div>_x000D_
        <div class="flex-item">4</div>_x000D_
    </div>_x000D_
</div>

_x000D_

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/

User · Answer

RESULT    CODE  HTML    lt div class  flex-container  gt     lt div class  rows  gt        lt div class  row  gt         lt span class  flex-item  gt 1 lt  span gt       lt  div gt       lt div class  row  gt         lt span class  flex-item  gt 2 lt  span gt       lt  div gt       lt div class  row  gt         lt span class  flex-item  gt 3 lt  span gt       lt  div gt       lt div class  row  gt         lt span class  flex-item  gt 4 lt  span gt       lt  div gt      lt  div gt     lt  div gt    CSS   html  body     height  100         flex-container     display  flex    justify-content  center    align-items  center    height  100       rows     display  flex    flex-direction  column      where flex-container div is used to center vertically and horizontally your rows div  and rows div is used to group your  items  and ordering them in a column based one

User · Answer

Using CSS    lt div class  EXTENDER  gt     lt div class  PADDER-CENTER  gt       lt div contentEditable  true  gt Edit this text    lt  div gt     lt  div gt   lt  div gt    take a look HERE

User · Answer

You can add flex-direction column to flex-container  flex-container     flex-direction  column     Add display inline-block to flex-item  flex-item    display  inline-block      because you added width and height has no effect on this element since it has a display of inline  Try adding display inline-block or display block  Learn more about width and height   Also add to row class  you are given row   not taken as style   row    width 100     margin 0 auto    text-align center     Working Demo in Row    x000D   x000D   flex-container     padding  0    margin  0    list-style  none    display  flex    align-items  center    justify-content center    flex-direction column     row    width 100     margin 0 auto    text-align center     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    display  inline-block    x000D   lt div class  flex-container  gt     lt div class  row  gt       lt span class  flex-item  gt 1 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 2 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 3 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 4 lt  span gt     lt  div gt   lt  div gt  x000D   x000D   x000D   Working Demo in Column    x000D   x000D   flex-container     padding  0    margin  0    width  100     list-style  none    display  flex    align-items  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    display  inline-block    x000D   lt div class  flex-container  gt     lt div class  row  gt       lt span class  flex-item  gt 1 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 2 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 3 lt  span gt     lt  div gt     lt div class  row  gt       lt span class  flex-item  gt 4 lt  span gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can make use of display  flex  align-items  center  justify-content  center   on your parent component

User · Answer

If you need to center a text in a link this will do the trick    x000D   x000D  div   x000D    display  flex  x000D   x000D    width  200px  x000D    height  80px  x000D    background-color  yellow  x000D    x000D   x000D  a   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    text-align  center     only important for multiple lines    x000D   x000D    padding  0 20px  x000D    background-color  silver  x000D    border  2px solid blue  x000D    x000D   lt div gt  x000D     lt a href     gt text lt  a gt  x000D     lt a href     gt text with two lines lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   parentDivClass   x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

margin  auto works  quot perfectly quot  with flexbox i e  it allows to center item vertically and horizontally   x000D   x000D  html  body     height  100     max-height  100       flex-container     display  flex         height  100     background-color  green      container     display  flex    margin  auto    x000D   lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  gt     lt title gt JS lt  title gt   lt  head gt   lt body gt     lt div class  flex-container  gt       lt div class  container  gt         lt div class  row  gt           lt span class  flex-item  gt 1 lt  span gt         lt  div gt         lt div class  row  gt           lt span class  flex-item  gt 2 lt  span gt         lt  div gt         lt div class  row  gt           lt span class  flex-item  gt 3 lt  span gt         lt  div gt        lt div class  row  gt           lt span class  flex-item  gt 4 lt  span gt       lt  div gt     lt  div gt     lt  div gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

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    lt div id  container  gt  lt  -- flex container -- gt        lt div class  box  id  bluebox  gt  lt  -- flex item -- gt           lt p gt DIV  1 lt  p gt       lt  div gt        lt div class  box  id  redbox  gt  lt  -- flex item -- gt           lt p gt DIV  2 lt  p gt       lt  div gt    lt  div gt      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  lt p gt   which is not a flex item          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        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  lt  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

User · Answer

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    x000D   x000D   container  x000D    width  100     width needs to be setup   x000D    height  150px    height needs to be setup   x000D    display  flex  x000D    x000D   x000D   item  x000D    margin  auto    These will make the item in center   x000D    background-color   CCC  x000D    x000D   lt div id  container  gt  x000D      lt div class  item  gt CENTER lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Hope this will help   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

[html] Flexbox: center horizontally and vertically

Examples related to html

Examples related to css

Examples related to flexbox