How do i post the content of the div on the middle of the body?

Question

hello i am working in an web applications when i want to put the grid on the center my code not work and the grid still on the same place , this is what i tried, i am stuck with it and i did many way but this that i want i cant get it any help please ?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.grid-container {
display: grid;
grid-template-columns: auto auto                 
auto;
grid-gap: 2px;
background-color: #2196F3;
padding: 2px;

}

.items {
background-color: rgba(255, 255,     
255, 0.8);
text-align: center;
padding: 40px 0;




}

.item1 {
grid-column-start: 1;
grid-column-end: 3;
background-color: orange;
}
.item2{
grid-column-start: 3;
grid-column-end: 4;
background-color: orange;

}
.item3{
grid-row-start: 2;
grid-row-end: 4;
background-color:#dfe11b;
}

.item4{
grid-column-start: 2;
grid-column-end: 4;
background-color:#e11b93
}

.item5{
grid-column-start: 2;
grid-column-end: 4;
background-color:#e11b93
}

.item6{

background-color:#0872d4

}
.item7{

background-color:#0872d4
}

.item8{

background-color:#0872d4
}
.Body{
margin: 0;
height: 100vh;
display: flex;
align-items:center;
justify-content:center;
}


</style>
<title>griad</title>
</head>



<body>
<div class="grid-container">
  <div class="item1 items"></div>
  <div class="item2 items"></div>
  <div class="item3 items"></div>  
  <div class="item4 items"></div>
  <div class="item5 items"></div>
  <div class="item6 items"></div>
  <div class="item7 items"></div>
  <div class="item8 items"></div>  
</div>

</body>
</html>

The output of my code:

and this is what i want:

Does this answer your question? [How do I center vertically and horizontally a div inside the body element without absolute positioning?](https://stackoverflow.com/questions/15322519/how-do-i-center-vertically-and-horizontally-a-div-inside-the-body-element-withou) — Oscar Schafer, Mar 31 '21 at 07:55

score 2 · Answer 1 · answered Mar 31 '21 at 07:58

2

The styles defined for the body are set for a class, .body { }. this should just be body { } in your styling.

answered Mar 31 '21 at 07:58

Climber-Sean

21
1

thank you for your help – zardasht Jaza Mar 31 '21 at 10:29

score 1 · Answer 2 · answered Mar 31 '21 at 07:59

First of all your .Body doesn't exist in html so either add this class to <body> element or change (as in my example) classname to tag.

this will make your .grid-container stay on center. However it will be less that few pixels wide. In order to prevent that youw will have to set width property to your .grid-container class something like width: 500px or make it more responsive and set max-width: 500px; width: 100%;

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 2px;
    background-color: #2196F3;
    padding: 2px;
    max-width: 500px;
    width: 100%;
}

.items {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 40px;
}

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: orange;
}

.item2 {
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: orange;
}

.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
    background-color: #dfe11b;
}

.item4,
.item5 {
    grid-column-start: 2;
    grid-column-end: 4;
    background-color: #e11b93;
}

.item6,
.item7,
.item8 {
    background-color: #0872d4;
}

<div class="grid-container">
    <div class="item1 items"></div>
    <div class="item2 items"></div>
    <div class="item3 items"></div>
    <div class="item4 items"></div>
    <div class="item5 items"></div>
    <div class="item6 items"></div>
    <div class="item7 items"></div>
    <div class="item8 items"></div>
</div>

Thanks dude it was helpful – zardasht Jaza Mar 31 '21 at 10:29 — zardasht Jaza, Mar 31 '21 at 10:29

Matija · Answer 3 · 2021-03-31T07:56:09.163

.grid-container {
display: grid;
grid-template-columns: auto auto                 
auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
height:100vh;
width:100%;
background-color:#fff;
}

.items {
background-color: rgba(255, 255,     
255, 0.8);
text-align: center;
padding: 40px 0;




}

.item1 {
grid-column-start: 1;
grid-column-end: 3;
background-color: orange;
}
.item2{
grid-column-start: 3;
grid-column-end: 4;
background-color: orange;

}
.item3{
grid-row-start: 2;
grid-row-end: 4;
background-color:#dfe11b;
}

.item4{
grid-column-start: 2;
grid-column-end: 4;
background-color:#e11b93
}

.item5{
grid-column-start: 2;
grid-column-end: 4;
background-color:#e11b93
}

.item6{

background-color:#0872d4

}
.item7{

background-color:#0872d4
}

.item8{

background-color:#0872d4
}
body{
margin: 0;
padding:0;
box-sizing-border-box;**strong text**
}

<!DOCTYPE html>
<html>
<head>
<title>grid</title>
</head>



<body>
<div class="grid-container">
  <div class="item1 items"></div>
  <div class="item2 items"></div>
  <div class="item3 items"></div>  
  <div class="item4 items"></div>
  <div class="item5 items"></div>
  <div class="item6 items"></div>
  <div class="item7 items"></div>
  <div class="item8 items"></div>  
</div>

</body>
</html>

Add the height and width to the existing grid-container. Set the width to be 100% and for height to be 100vh, and it will be fullscreen. Set the margins and padding to 0 for the body to remove unwanted spaces.

And put the grid-gap to be wider, if you want it to be exactly the same as in the picture below.

How do i post the content of the div on the middle of the body?

3 Answers3