How to Horizontally and Vertically Center a Fixed-Position Element?

How to Center a Position:fixed Element

Problem:

Centering a "position: fixed;" popup box horizontally and vertically with dynamic width and height, despite using margin: 5% auto;

Solution:

There are several approaches to achieve this:

Approach 1: Fixed Width and Height

1. Set top and left to 50% to center the top-left corner of the div.
2. Set margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

Approach 2: Dynamic Width and/or Height

1. Use transform instead of margin, setting it to the negative half of the div's relative width and height.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Approach 3: Fixed Width, But Don't Care About Vertical Centering

1. Add left: 0 and right: 0 to the element, while setting margin-left and margin-right to auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally */
left: 0;
right: 0;

The above is the detailed content of How to Horizontally and Vertically Center a Fixed-Position Element?. For more information, please follow other related articles on the PHP Chinese website!