CSS-horizontal center, vertical center, adaptive width

Adaptive width: the content of the element's width root Curie is changed;

1. horizontal center of adaptive width elements:

1. the adaptive elements of width can be absolute bitwise, floating element, and intra-Row Element. In general, we certainly do not use in-row elements, so we will choose, absolutely locate or float.

2. Center: here we should think of 1/2, 50%, half, and so on.

Medium: Black is the body, dark green needs to be horizontally centered in the body, and the width is adaptive. Bright Green is an extra Div to align the dark green Div horizontally.

The following is the implementationCode:

The float: Left of the POs element or both position: absolute; can be used, because the two attributes can be adaptive width.

First, this extra div is highlighted in green and moves horizontally by 50% (move, you can use margin-left or left)

Let the dark green content move 50% horizontally to the right (only the right attribute can be used );

Then this dark green will be centered in the black body!

    body  >    Div   class   =" POS " >    Div   class  =" boxa " > internal content used for testing    Div  >    Div  >    body  > 

* {Margin:0; Padding:0;} Body {Background :#000000;}. Pos {Float: Left; margin-left:50%; Background: #33cc33; padding: 10px;}. boxa {position: relative; right:50%; Background :#096;}
 

Conclusion: The outer layer must be adaptive width. (float: Left or position: absolute ;)

The bitwise of the inner layer: It must be automatically 100% in width (relative to the outer layer, 100% );

In addition, the range of the outer layer can be moved;

(So you have no choice but to use position: relative !)