The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work.
Interestingly, the elements center on PC but for some reason, they do not center on mobile devices even though I have 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>

Any help is greatly appreciated!

htmlcss

Answer №1

Here is the CSS code snippet you can utilize:

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

Answer №2

There are two solutions to resolve the issue at hand.

Option 1 - Eliminating padding The reason the elements are not properly centered is due to the presence of padding assigned to .page-content in the CSS file.

Option 2 - Introducing box-sizing. If you require the padding for your div, then it is advisable to implement box-sizing for the parent container. In this case, based on the provided code snippet, the parent container appears to be the body. This particular property incorporates any padding and margin into the overall width and height of the container.

I have included box-sizing:border-box; to your existing code below.

body{
box-sizing:border-box; /*Include this line*/
}

.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>

Answer №3

To remove the padding: 20px; within the .page_content style, you'd need to delete it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

htmlcsstypescriptangular6

Expansive Bootstrap division

I am seeking assistance in achieving a Bootstrap layout similar to the image provided below. My difficulty lies in ensuring that the yellow bar spans the full width of the Bootstrap container without disrupting the stacking order of columns on mobile view. ...

htmlcsstwitter-bootstrapresponsive-design

Adding Font Awesome to my Angular 12 project within Visual Studio 2019

Seeking a no-frills guide for integrating Font Awesome (free version) into my Angular 12 application within Visual Studio 2019. After countless Google searches, I am bombarded with intricate methods. It's baffling why such complexity exists just to in ...

cssangularvisual-studio-2019font-awesome

Adjusting Size Dynamically for Tooltips Based on Content Length

In my angular app using ng-bootstrap v4.2.1 on an older codebase, I have successfully created a tooltip with some very long sentences as content. I am trying to make the tooltip 800px wide, but when I set the width, only the first few words fill the space. ...

htmlcssangularng-bootstrap

Python regular expression problem with matching regex

Hey there, I'm diving into my first question on stackoverflow and I've been struggling with it for hours. I'm sure the solution is right in front of me, but I just can't seem to find it. My goal is to extract information from a webpage ...

pythonhtmlregexhtml-parsingexpression

Prevent Bootstrap 4 from causing content to shift downwards when collapsing

Currently, I am utilizing Bootstrap 4 Collapse and it is functioning flawlessly. However, I am interested in making a slight adjustment. Is there a method to prevent the collapse from pushing down the content below it and instead have it overlap? If this i ...

csstwitter-bootstrapbootstrap-4

Aligning a navigation bar with a hamburger menu in the center

I recently implemented a hamburger menu with some cool animations into my site for mobile devices. Now, I am facing the challenge of centering the menu on desktop screens and it's proving to be tricky. The positioning is off, and traditional methods l ...

javascripthtmlcssresponsive-design

What is preventing me from using JavaScript to generate labels?

My current project involves creating dynamic input fields to filter products by color. I initially attempted static checkbox inputs for this purpose, which worked fine. Now, I want to achieve the same functionality but dynamically through JavaScript. Inste ...

javascripthtmljquerycss

ASP.NET Core 3.1 dynamic image resizing

<div class="col-md-6"> <div class="border"> <img height="300" width="400" src="~/Images/vg.png" class="rounded"/> <p>This is a sample paragraph.</p&g ...

htmlcsstwitter-bootstrapasp.net-core

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

Using mediastreamrecorder.js, I am successfully recording video in 5-second blobs within the ondataavailable function. Here is an example of the code: mediaRecorder.ondataavailable = function(blob) { blob=blob; }; While I am a ...

jqueryhtmlfile-uploadwebrtcyoutube-javascript-api

Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...

htmlcssbootstrap-4

Tips for connecting 2 Bootstrap 5 carousels

I currently have 2 Bootstrap 5 carousels (carousel-a & carousel-b) on the same page and I want them to be synchronized with each other. I believe this can be achieved using JavaScript, but I am not very familiar with it. Below is the structure of carousel- ...

javascripthtmlbootstrap-5

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...

htmllistcssflexbox

Ways to stop two JavaScript files from running at the same time

After combining two JavaScript files, I am facing some issues. The first file handles validation while the second one has an ajax plugin for form submission after validation. When I include these files in the header section, they both run simultaneously. H ...

javascriptjqueryhtmlajaxvalidation

The JavaScript code is not being executed, as the address bar displays the function name instead

In my project, I have created numerous "js-classes" with various functions spread across different files. Unfortunately, the codebase is too large to share entirely. However, towards the end of the project, I encountered a bug where a specific function wa ...

javascripthtml

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

csshyperlink

invoking a function by utilizing nested controllers

Struggling with nested controllers, the main goal of this code is to link data extracted from a .json file to another function or file. .html file: <div ng-app="myApp" ng-controller="GetCtrl" > <li ng-controller="ChannelCtrl" ng-repeat="x in ...

javascriptangularjshtml

Tips for adjusting the color of boxes within a grid

I've built a grid containing multiple boxes, each identified with an id of box + i. However, I'm encountering difficulties when attempting to implement an on-click function to change the color of each box. Below is the code snippet in question: f ...

javascripthtmlreactjsonclickgrid