How to center CSS absolute positioning? Four implementation methods of css absolute positioning and centering

Centering is often used when laying out css on web pages. Among them is css absolute positioning. So, how to achieve centering with css absolute positioning? Today’s article will introduce to you how to implement absolute positioning and centering in CSS.

Recommended Manual: CSS Online Manual

There are many ways to implement css absolute positioning and centering. The following will introduce you to css absolute positioning and centering. Four methods.

1. Usage of mainstream CSS absolute positioning and centering with good compatibility:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

Note: This method has an obvious shortcoming, which is that the size of the element needs to be known in advance. Otherwise, the adjustment of negative margin values ​​cannot be accurate. At this time, it is often necessary to obtain it with the help of JS.

2. The emergence of CSS3 has led to a better solution, which is to use transform instead of margin. The percentage value of the translate offset in transform is relative to its own size. You can achieve CSS absolute positioning and centering like this:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3. Margin:auto realizes the centering of absolutely positioned elements (0 position positioning for top, bottom, left and right; margin: auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4. Use css3 box model: flex layout to realize css absolute positioning Centered. This situation can be used regardless of lower version browsers.

Recommended related articles:
1.How to perform absolute positioning in CSS
2.Explain the relative positioning and absolute positioning in CSS with examples Usage and difference (pictures and text)
3.Detailed chart of advantages and disadvantages of css absolute positioning and centering technology
Related video recommendations:
1.CSS Video Tutorial-Jade Girl Heart Sutra Edition

This article ends here. For more information about positioning, please refer to css Manual.

The above is the detailed content of How to center CSS absolute positioning? Four implementation methods of css absolute positioning and centering. For more information, please follow other related articles on the PHP Chinese website!