CSS positioning and centering issues

Positioning and centering issues are frequently encountered in CSS. For a fixed-height element, the vertical horizontal center of the parent element is implemented by the Position property. This method fails when the size of the element is variable, and we can center it with flex and table, both of which will be carefully studied in the future, using only the position method.

The task needs to be completed as follows:

　　

The corresponding code is as follows:

1 . Main{2 position:Absolute;3 Top:50%;4  Left:50%;5 width:400px;6 Height:200px;7 margin:-100px 0 0-200px;8 Background-color:#ccc;9}Ten . Corner{ One position:Absolute; A width:50px; - Height:50px; - Background-color:#fc0; the} - . Top-left{ - Top:0; -  Left:0; + Border-radius:0 0 50px 0; -} + . Bottom-right{ A Bottom:0; at  Right:0; - Border-radius:50px 0 0 0; -}

The corresponding HTML code is:

1 <Divclass= "Container">2         <Divclass= "Main">3             <Divclass= "Top-left Corner"></Div>4             <Divclass= "Bottom-right Corner"></Div>5         </Div>6 </Div>

To achieve the center of the gray rectangle, we set its position property to absolute, and at the very beginning, I used the relative to find top:50% invalidated, because 50% is relative to the height of its parent element, and its parent element height is zero. So I set the body and the parent element height to 100%, still no effect (this question has not been resolved). After changing to absolute, the gray rectangle offset is relative to the page, and the vertical center is achieved.

The last two yellow rounded corners, the same reason, after setting absolute, further set the Top,bottom,right,left property for it.

Finally, post the demo code

　　

　　

CSS positioning and centering issues