Elements won't center on div

Question

Elements won't center on my div, even though I've went through all the possible (or at least so many that I decided to create a Stack Overflow account finally) ways to fix it
They center on PC, but doesn't work for mobile devices. I've defined this in the CSS

.page_content {
  background: linear-gradient(90deg, rgba(94, 182, 86, 1) 48%, rgba(121, 230, 111, 1) 100%);
  padding: 20px;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: auto;
  justify-content: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
}

<body style="color: #efefef">
  <div class="page_content">
    <h1>Home page</h1>
    <button class="button" onclick="testFunction()">Example</button>
    <h1>Buttons</h1>
    <button class="button" onclick="testFunction1()">btn 1</button>
    <br>
    <br>
    <button class="button" onclick="testFunction2()">btn 2</button>

  </div>
  </div>
</body>

Thank you in Advance

Try and remove `padding: 20px;` or set it to `padding: 20px 0;` — aerial, Nov 08 '21 at 07:18

score 0 · Answer 1 · edited Nov 08 '21 at 08:40

0

You would have to delete the padding: 20px; in the class .page_content

edited Nov 08 '21 at 08:40

Ivan Aracki

4,861
11
59
73

answered Nov 08 '21 at 07:21

Angel Astorga

86
2

score 0 · Answer 2 · answered Nov 08 '21 at 07:46

You can Use this CSS code :

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
}
.page_content {
  background: -webkit-gradient(
    linear,
    left top, right top,
    color-stop(48%, rgba(94, 182, 86, 1)),
    to(rgba(121, 230, 111, 1))
  );
  background: -o-linear-gradient(
    left,
    rgba(94, 182, 86, 1) 48%,
    rgba(121, 230, 111, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(94, 182, 86, 1) 48%,
    rgba(121, 230, 111, 1) 100%
  );
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
  place-content: center;
  row-gap: 1rem;
}

score 0 · Answer 3 · answered Nov 08 '21 at 08:24

There are 2 ways to fix your problem.

Method 1 - Removing padding The elements are not centered becuase there is some padding givien to .page-content in the css.

Method 2 - Adding box-sizing. If you need the padding for your div, then you should add box-sizing for the parent container. Which, from the code you have given, is the body. This property includes any padding & margin in the container's total width and height.

I have added box-sizing:boder-box; to your code below.

body{
box-sizing:border-box; /*ADD THIS*/
}

.page_content {
   background: linear-gradient(90deg, rgba(94,182,86,1) 48%, rgba(121,230,111,1) 100%);
   padding: 20px;
   width: 100%;
   height: 100%;
   text-align: center;
   margin: auto;
   justify-content: center;
   top: 0; bottom: 0; right: 0; left: 0;
   position: fixed;
}

<body style="color: #efefef">
    <div class="page_content">
      <h1>Home page</h1>
      <button class="button" onclick="testFunction()">Example</button>
      <h1>Buttons</h1>
      <button class="button" onclick="testFunction1()">btn 1</button>
      <br>
      <br>
      <button class="button" onclick="testFunction2()">btn 2</button>

    </div>
  </div>
</body>

Elements won't center on div

3 Answers3