Centering in CSS Grid

Question

I m trying to create a simple page with CSS Grid   What I m failing to do is center the text from the HTML to the respective grid cells   I ve tried placing content in separate divs both inside and outside of the left bg and right bg selectors and playing with some of the CSS properties to no avail   How do I do this    x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-template-rows  100vh  x000D    grid-gap  0px 0px  x000D    x000D   x000D   left bg   x000D    display  subgrid  x000D    background-color   3498db  x000D    grid-column  1   1  x000D    grid-row  1   1  x000D    z-index  0  x000D    x000D   x000D   right bg   x000D    display  subgrid  x000D    background-color   ecf0f1  x000D    grid-column  2   2  x000D    grid row  1   1  x000D    z-index  0  x000D    x000D   x000D   left text   x000D    grid-column  1   1  x000D    grid-row  1   1  x000D    position  relative  x000D    z-index  1  x000D    justify-self  center  x000D    font-family  Raleway  x000D    font-size  large  x000D    x000D   x000D   right text   x000D    grid-column  2   2  x000D    grid row  1   1  x000D    position  relative  x000D    z-index  1  x000D    justify-self  center  x000D    font-family  Raleway  x000D    font-size  large  x000D    x000D   lt div class  container  gt  x000D     lt  --everything on the page-- gt  x000D   x000D     lt div class  left bg  gt  x000D       lt  --left background color of the page-- gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  right bg  gt  x000D     lt  --right background color of the page-- gt  x000D   lt  div gt  x000D   x000D   lt div class  left text  gt  x000D     lt  --left side text content-- gt  x000D     lt p gt Review my stuff lt  p gt  x000D   x000D     lt div class  right text  gt  x000D       lt  --right side text content-- gt  x000D       lt p gt Hire me  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You want this    x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-template-rows  100vh  x000D    grid-gap  0px 0px  x000D    x000D   x000D   left bg   x000D    display  subgrid  x000D    background-color   3498db  x000D    grid-column  1   1  x000D    grid-row  1   1  x000D    z-index  0  x000D    x000D   x000D   right bg   x000D    display  subgrid  x000D    background-color   ecf0f1  x000D    grid-column  2   2  x000D    grid row  1   1  x000D    z-index  0  x000D    x000D   x000D   text   x000D    font-family  Raleway  x000D    font-size  large  x000D    text-align  center  x000D    x000D   lt div class  container  gt  x000D     lt  --everything on the page-- gt  x000D   x000D     lt div class  left bg  gt  x000D       lt  --left background color of the page-- gt  x000D       lt div class  text  gt  x000D         lt  --left side text content-- gt  x000D         lt p gt Review my stuff lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  right bg  gt  x000D       lt  --right background color of the page-- gt  x000D       lt div class  text  gt  x000D         lt  --right side text content-- gt  x000D         lt p gt Hire me  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Do not even try to use flex  stay with css grid      https   jsfiddle net ctt3bqr0  place-self  center   is doing the centering work here  If you want to center something that is inside div that is inside grid cell you need to define nested grid in order to make it work   Please look at the fiddle both examples shown there   https   css-tricks com snippets css complete-guide-grid  Cheers

User · Answer

Try using flex   Plunker demo   https   plnkr co edit nk02ojKuXD2tAqZiWvf9     Styles go here     html  body     margin  0    padding  0      container     display  grid    grid-template-columns  1fr 1fr    grid-template-rows  100vh    grid-gap  0px 0px      left bg     background-color   3498db    grid-column  1   1    grid-row  1   1    z-index  0    display  flex    justify-content  center    align-items  center       right bg     background-color   ecf0f1    grid-column  2   2    grid row  1   1    z-index  0    display  flex    justify-content  center    align-items  center      text     font-family  Raleway    font-size  large    text-align  center      HTML       lt div class  container  gt     lt  --everything on the page-- gt      lt div class  left bg  gt       lt  --left background color of the page-- gt       lt div class  text  gt         lt  --left side text content-- gt         lt p gt Review my stuff lt  p gt       lt  div gt     lt  div gt      lt div class  right bg  gt       lt  --right background color of the page-- gt       lt div class  text  gt         lt  --right side text content-- gt         lt p gt Hire me  lt  p gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

This answer has two main sections    Understanding how alignment works in CSS Grid  Six methods for centering in CSS Grid    If you re only interested in the solutions  skip the first section     The Structure and Scope of Grid layout  To fully understand how centering works in a grid container  it s important to first understand the structure and scope of grid layout   The HTML structure of a grid container has three levels    the container the item the content   Each of these levels is independent from the others  in terms of applying grid properties   The scope of a grid container is limited to a parent-child relationship   This means that a grid container is always the parent and a grid item is always the child  Grid properties work only within this relationship   Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties   At least not until the subgrid feature has been implemented  which will allow descendants of grid items to respect the lines of the primary container    Here s an example of the structure and scope concepts described above   Imagine a tic-tac-toe-like grid   article     display  inline-grid    grid-template-rows  100px 100px 100px    grid-template-columns  100px 100px 100px    grid-gap  3px        You want the X s and O s centered in each cell   So you apply the centering at the container level   article     display  inline-grid    grid-template-rows  100px 100px 100px    grid-template-columns  100px 100px 100px    grid-gap  3px    justify-items  center      But because of the structure and scope of grid layout  justify-items on the container centers the grid items  not the content  at least not directly       x000D   x000D  article   x000D    display  inline-grid  x000D    grid-template-rows  100px 100px 100px  x000D    grid-template-columns  100px 100px 100px  x000D    grid-gap  3px  x000D    justify-items  center  x000D    x000D   x000D  section   x000D      border  2px solid black  x000D      font-size  3em  x000D    x000D   lt article gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    Same problem with align-items  The content may be centered as a by-product  but you ve lost the layout design   article     display  inline-grid    grid-template-rows  100px 100px 100px    grid-template-columns  100px 100px 100px    grid-gap  3px    justify-items  center    align-items  center         x000D   x000D  article   x000D    display  inline-grid  x000D    grid-template-rows  100px 100px 100px  x000D    grid-template-columns  100px 100px 100px  x000D    grid-gap  3px  x000D    justify-items  center  x000D    align-items  center  x000D    x000D   x000D  section   x000D      border  2px solid black  x000D      font-size  3em  x000D    x000D   lt article gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D       lt section gt O lt  section gt  x000D       lt section gt X lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    To center the content you need to take a different approach  Referring again to the structure and scope of grid layout  you need to treat the grid item as the parent and the content as the child   article     display  inline-grid    grid-template-rows  100px 100px 100px    grid-template-columns  100px 100px 100px    grid-gap  3px     section     display  flex    justify-content  center    align-items  center    border  2px solid black    font-size  3em         x000D   x000D  article   x000D    display  inline-grid  x000D    grid-template-rows  100px 100px 100px  x000D    grid-template-columns  100px 100px 100px  x000D    grid-gap  3px  x000D    x000D   x000D  section   x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    border  2px solid black  x000D    font-size  3em  x000D    x000D   lt article gt  x000D     lt section gt X lt  section gt  x000D     lt section gt O lt  section gt  x000D     lt section gt X lt  section gt  x000D     lt section gt O lt  section gt  x000D     lt section gt X lt  section gt  x000D     lt section gt O lt  section gt  x000D     lt section gt X lt  section gt  x000D     lt section gt O lt  section gt  x000D     lt section gt X lt  section gt  x000D   lt  article gt  x000D   x000D   x000D    jsFiddle demo    Six Methods for Centering in CSS Grid  There are multiple methods for centering grid items and their content   Here s a basic 2x2 grid    x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    Flexbox  For a simple and easy way to center the content of grid items use flexbox   More specifically  make the grid item into a flex container   There is no conflict  spec violation or other problem with this method  It s clean and valid   grid-item     display  flex    align-items  center    justify-content  center       x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D  grid-item   x000D    display  flex                new    x000D    align-items  center          new    x000D    justify-content  center      new    x000D    x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    See this post for a complete explanation    How to Center Elements Vertically and Horizontally in Flexbox     Grid Layout  In the same way that a flex item can also be a flex container  a grid item can also be a grid container  This solution is similar to the flexbox solution above  except centering is done with grid  not flex  properties    x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D  grid-item   x000D    display  grid                new    x000D    align-items  center          new    x000D    justify-items  center        new    x000D    x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D      auto margins  Use margin  auto to vertically and horizontally center grid items   grid-item     margin  auto       x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D  grid-item   x000D    margin  auto  x000D    x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    To center the content of grid items you need to make the item into a grid  or flex  container  wrap anonymous items in their own elements  since they cannot be directly targeted by CSS   and apply the margins to the new elements   grid-item     display  flex     span  img     margin  auto       x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D  grid-item   x000D    display  flex  x000D    x000D   x000D  span  img   x000D    margin  auto  x000D    x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt  lt span gt this text should be centered lt  span gt  lt  grid-item gt  x000D     lt grid-item gt  lt span gt this text should be centered lt  span gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D      Box Alignment Properties  When considering using the following properties to align grid items  read the section on auto margins above    align-items justify-items align-self justify-self   https   www w3 org TR css-align-3  property-index    text-align  center  To center content horizontally in a grid item  you can use the text-align property    x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    text-align  center      new    x000D    x000D   x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    Note that for vertical centering  vertical-align  middle will not work   This is because the vertical-align property applies only to inline and table-cell containers    x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    text-align  center          lt --- works    x000D    vertical-align  middle      lt --- fails    x000D    x000D   x000D   x000D     can ignore styles below  decorative only    x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt this text should be centered lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    One might say that display  inline-grid establishes an inline-level container  and that would be true  So why doesn t vertical-align work in grid items    The reason is that in a grid formatting context  items are treated as block-level elements      6 1  Grid Item   Display      The display value of a grid item is blockified  if the   specified display of an in-flow child of an element generating a   grid container is an inline-level value  it computes to its   block-level equivalent    In a block formatting context  something the vertical-align property was originally designed for  the browser doesn t expect to find a block-level element in an inline-level container  That s invalid HTML     CSS Positioning  Lastly  there s a general CSS centering solution that also works in Grid  absolute positioning   This is a good method for centering objects that need to be removed from the document flow  For example  if you want to    Center text over an image  or Place asterisks     above required form fields   Simply set position  absolute on the element to be centered  and position  relative on the ancestor that will serve as the containing block  it s usually the parent   Something like this   grid-item     position  relative    text-align  center     span     position  absolute    left  50     top  50     transform  translate -50   -50         x000D   x000D  grid-container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-auto-rows  75px  x000D    grid-gap  10px  x000D    x000D   x000D  grid-item   x000D    position  relative  x000D    text-align  center  x000D    x000D   x000D  span  img   x000D    position  absolute  x000D    left  50   x000D    top  50   x000D    transform  translate -50   -50    x000D    x000D   x000D   x000D     can ignore styles below  decorative only    x000D   x000D  grid-container   x000D    background-color  lightyellow  x000D    border  1px solid  bbb  x000D    padding  10px  x000D    x000D   x000D  grid-item   x000D    background-color  lightgreen  x000D    border  1px solid  ccc  x000D    x000D   lt grid-container gt  x000D     lt grid-item gt  lt span gt this text should be centered lt  span gt  lt  grid-item gt  x000D     lt grid-item gt  lt span gt this text should be centered lt  span gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D     lt grid-item gt  lt img src  http   i imgur com 60PVLis png  width  50  height  50  alt    gt  lt  grid-item gt  x000D   lt  grid-container gt  x000D   x000D   x000D    Here s a complete explanation for how this method works    Element will not stay centered  especially when re-sizing screen   Here s the section on absolute positioning in the Grid spec    https   www w3 org TR css3-grid-layout  abspos

User · Answer

The CSS place-items shorthand property sets the align-items and justify-items properties  respectively  If the second value is not set  the first value is also used for it   parent     display  grid    place-items  center

User · Answer

You can use flexbox to center your text  By the way no need for extra containers because text is considered as anonymous flex item   From flexbox specs      Each in-flow child of a flex container becomes a flex item  and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item  However  an anonymous flex item that contains only white space  i e  characters that can be affected by the white-space property  is not rendered  just as if it were display none     So just make grid items as flex containers  display  flex   and add align-items  center and justify-content  center to center both vertically and horizontally   Also performed optimization of HTML and CSS    x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr  x000D    grid-template-rows  100vh  x000D     x000D    font-family  Raleway  x000D    font-size  large  x000D    x000D   x000D   left bg  x000D   right bg   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    x000D   x000D   left bg   x000D    background-color   3498db  x000D    x000D   x000D   right bg   x000D    background-color   ecf0f1  x000D    x000D   lt div class  container  gt  x000D     lt div class  left bg  gt Review my stuff lt  div gt  x000D     lt div class  right bg  gt Hire me  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know this question is a couple years old  but I am surprised to find that no one suggested      text-align  center    this is a more universal property than justify-content  and is definitely not unique to grid  but I find that when dealing with text  which is what this question specifically asks about  that it aligns text to the center with-out affecting the space between grid items  or the vertical centering  It centers text horizontally where its stands on its vertical axis  I also find it to remove a layer of complexity that justify-content and align-items adds  justify-content and align-items affects the entire grid item or items  text-align centers the text without affecting the container it is in  Hope this helps

[html] Centering in CSS Grid

Examples related to html

Examples related to css

Examples related to centering

Examples related to css-grid