Position attribute absolute and relative horizontal centering in css style

First we need to understand these two positionings in the style;

absolute (absolute positioning): drag the assigned object out of the document flow, and use left, right, top, bottom and other attributes to relative Perform absolute positioning on the closest parent object with positioning settings. If the parent does not have positioning attributes set, it will be set according to the default rules (positioning based on the upper left corner of the body as a reference). At the same time, the absolutely positioned object can cascade.

relative (relative positioning): Objects cannot overlap. Use left, right, top, bottom and other attributes to position them in the normal document flow. Their objects cannot be cascaded.

Centering:

1. In order to achieve the effect of adaptive centering for objects that use absolute positioning, the width of the object must be set; for example, the following code implements centering

.ceshi
    { 
        position:absolute;
        bottom: 10%;
        display: block;
        width: 250px;
        left:50%;
        margin-left:-125px;
        }

2. For the object that uses relative positioning to achieve the centering effect, because it is in the normal document flow, its reference object is itself, and you can set it as follows:

.ceshi2
{
margin：0 auto;
}

The above is the detailed content of Position attribute absolute and relative horizontal centering in css style. For more information, please follow other related articles on the PHP Chinese website!