How can I place my grid container at the very center of my page?

Question

* {
  box-sizing: border-box;
  border: 0;
  list-style-type: none;
}

body {
  margin: auto;
  font-size: 16px;
  background-color: #9f95df;
}

header {
  min-height: 15vh;
  width: 100%;
  display: flex;
  place-content: center;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  background-color: slateblue;
  color: #EEEEFF;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
}

header span {
  font-size: normal;
  color: red;
}

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 3px;
  border: 1px solid red;
  place-content: center;
}

.grid-container div {
  background-color: orange;
}

<header>
  <h1>X<span>CodeMedia</span></h1>
</header>
<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">Box 2</div>
  <div class="item3">Box 3</div>
  <div class="item4">Box 4</div>
</div>

I just want my grid-container class to be centered vertically and horizontal on the page.

Can you add your HTML and more details on what you’re trying to center? Is it centering a `grid-container` element in the page? [link](https://stackoverflow.com/questions/71594811/centering-elements-in-row-vertically-with-react-bootstrap/71598188?r=SearchResults&s=14%7C30.1391#71598188) Or is it centering item(s) inside the `grid-container`? [link](https://stackoverflow.com/questions/45536537/centering-in-css-grid?r=SearchResults&s=1%7C308.9017) either way, both problems have a load of already answered questions — Sean Conkie, Jan 06 '23 at 21:47
I want to center the container div on the page. Not the contents — Dumte, Jan 06 '23 at 21:55

score 1 · Answer 1 · answered Jan 08 '23 at 12:13

You already use the needed CSS property place-content: center; and so the grid is centered horizontally. The reason why the grid doesn't seem to be centered vertically is, that the height of the grid is exactly the height of the grid items.

So to fix this, you must increase the height of the grid to the whole page, e.g. height: 100vh;. Although in this case this is a bit too large because of the additional header, where height: 85vh might be more appropriate:

.grid-container {
  /* ... */
  height: 85vh;
}

* {
  box-sizing: border-box;
  border: 0;
  list-style-type: none;
}

body {
  margin: auto;
  font-size: 16px;
  background-color: #9f95df;
}

header {
  min-height: 15vh;
  width: 100%;
  display: flex;
  place-content: center;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  background-color: slateblue;
  color: #EEEEFF;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.9);
}

header span {
  font-size: normal;
  color: red;
}

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 3px;
  border: 1px solid red;
  place-content: center;
  height: 85vh;
}

.grid-container div {
  background-color: orange;
}

<header>
  <h1>X<span>CodeMedia</span></h1>
</header>
<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">Box 2</div>
  <div class="item3">Box 3</div>
  <div class="item4">Box 4</div>
</div>

score -1 · Answer 2 · answered Jan 06 '23 at 21:26

-1

enter code here

    <img src="img/dunya.gif" width="500" height="500" >
                </center>
            </div>

integrate this into your own code it should work

answered Jan 06 '23 at 21:26

Kaan Cirakoglu

1

1

At which a part of my code – Dumte Jan 06 '23 at 21:33

How can I place my grid container at the very center of my page?

XCodeMedia

2 Answers2