[html] Centering in CSS Grid

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_
<div class="container">_x000D_
  <!--everything on the page-->_x000D_
_x000D_
  <div class="left_bg">_x000D_
    <!--left background color of the page-->_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div class="right_bg">_x000D_
  <!--right background color of the page-->_x000D_
</div>_x000D_
_x000D_
<div class="left_text">_x000D_
  <!--left side text content-->_x000D_
  <p>Review my stuff</p>_x000D_
_x000D_
  <div class="right_text">_x000D_
    <!--right side text content-->_x000D_
    <p>Hire me!</p>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

This question is related to html css centering css-grid

The answer is


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

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

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.


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_
<div class="container">_x000D_
  <!--everything on the page-->_x000D_
_x000D_
  <div class="left_bg">_x000D_
    <!--left background color of the page-->_x000D_
    <div class="text">_x000D_
      <!--left side text content-->_x000D_
      <p>Review my stuff</p>_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
  <div class="right_bg">_x000D_
    <!--right background color of the page-->_x000D_
    <div class="text">_x000D_
      <!--right side text content-->_x000D_
      <p>Hire me!</p>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_


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;
}

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_
<div class="container">_x000D_
  <div class="left_bg">Review my stuff</div>_x000D_
  <div class="right_bg">Hire me!</div>_x000D_
</div>
_x000D_
_x000D_
_x000D_


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!


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to centering

Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning Centering in CSS Grid Bootstrap 4 Center Vertical and Horizontal Alignment Center a column using Twitter Bootstrap 3 How to horizontally align ul to center of div? How to center a <p> element inside a <div> container? Using margin:auto to vertically-align a div How to center body on a page? How to center a "position: absolute" element How to center a button within a div?

Examples related to css-grid

CSS Grid Layout not working in IE11 even with prefixes Centering in CSS Grid Equal height rows in CSS Grid Layout force css grid container to fill full screen of device Prevent content from expanding grid items CSS grid wrapping How do I specify row heights in CSS Grid layout?