When viewing a mobile page at the top, the div is centered vertically. However, as we scroll down the page, an error occurs

Question

When viewing a mobile page at the top, the div is centered vertically. However, as we scroll down the page, an error occurs

I recently started developing a Cordova app and encountered an issue. Whenever I click on a specific div, its components are supposed to be displayed in a popup located at the center of the screen. This is the relevant code snippet:

        var new_height = $('#' + id).height() + 20;
        var new_width = $('#' + id).width() * 0.97;

        $('#' + id + '_popup').width(new_width);

        var move_up = $('#' + id + '_popup').height() / 2;

        $('#' + id + '_popup').css({
            "overflow-y": 'auto',
            'transform': 'translateY(-' + $('#' + id + '_popup').height() / 2 + 'px)'
        });

        $('#' + id + '_popup').css("z-index", '3000');

However, I noticed that when I scroll down the page, the new div appears above the center position instead of staying centered. Can anyone suggest a solution for this issue?

javascript jquery html css

Answer 1

Answer №1

To perfectly center an element, utilize CSS instead of unnecessary calculations. Use the transform property in this manner:

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}
.green {
  position: absolute;
  height: 40%;
  width: 40%;
  background: green;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%); /*safari iOS*/
  transform: translate(-50%, -50%);
}

<div class="red">
  <div class="green">
  </div>
</div>

Regardless of the box sizes, this code will always center the elements on the screen.

You can switch the position to fixed or relative, and it will still function correctly.

Answer 2

To perfectly center an element, utilize CSS instead of unnecessary calculations. Use the transform property in this manner:

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}
.green {
  position: absolute;
  height: 40%;
  width: 40%;
  background: green;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%); /*safari iOS*/
  transform: translate(-50%, -50%);
}

<div class="red">
  <div class="green">
  </div>
</div>

Regardless of the box sizes, this code will always center the elements on the screen.

You can switch the position to fixed or relative, and it will still function correctly.

When viewing a mobile page at the top, the div is centered vertically. However, as we scroll down the page, an error occurs

Answer №1

Similar questions

Why is the conversion of rgba to hsla happening in Scss?

How to retrieve and modify JSON data in Node.js using Stream with both Get and Post methods

What could be the reason for my regex succeeding on the client side but failing on the server side

What is the secret behind Node.js's ability to efficiently manage multiple requests using just one thread

The customary scroll bar located to the right side of the screen

Guide to importing firebase-functions and firebase-admin using ES6 syntax for transpilation with Babel in Node 10

Issue with Firefox: dblclick() function not supported by jQuery!

Issue encountered during JSON file extraction (Firefox)

Creating borders around Material UI grid items can be achieved by applying a border style to the

Determine the number of unread messages in Office365 using SharePoint Online

Use two HTML forms, each one only submitting its own form for validation

It seems that Ionic 2 does not support the registration of custom HTML tags

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

"Trouble with React JS redirection feature failing to redirect as intended

Obtain an Instance of a Class Using a Decorator

guide on updating JQuery string with JavaScript to incorporate new parameters

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

Is there a way to extract the query string from a file in order to query the database using ExpressJS?

Having trouble with individuals gaining access to my gh-pages on Github

Trigger jQuery event on a table cell