Self-adapting centering

First, the form is centered

Position:absolute; top:0; right:0; bottom:0; left:0; Margin:auto; /*height:50px; width:165px; */

Brief analysis:

Position: Fixed position display (absolute|fixed);

"Absolute: Window size is determined by upper position for absolute, fixed, relative child-parent relationship window; fixed: The window size is determined by the upper layer position as a fixed child-parent Relationship window"

Top,right,bottom,left: Set offset (<value>|auto);

When set to Auto, indicates that the window is not centered in that direction, such as: Left:auto, the window is not centered in the horizontal position.

Margin: Adaptive layout (auto);

"Window will only center in the direction of auto"

HEIGHT,WIDHT: can be set or not set (<value>|auto);

"No setting is determined by top,right,bottom,left size"

Two, text, picture Mix Adaptive Center

. nav {position:relative;float:left;width:220 px;height:45 px;cursor:pointer;line-height:45 px;text-align:cente R;vertical-align:middle;color: #fff; font-size:18 px;font-weight:600; }.nav.nav-item {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;height:25 px;line-height:25 Px;di Splay:table-caption; }    . nav span {position:relative;top:0;bottom:0;height:25 px;padding-left:30 px;display:inline-block;}    . nav img {position:absolute;top:0;left:0;width:25 px;height:25 px;z-index:10}

Brief analysis:

. NAV: Limit window size;

"Text-align: Limit span Horizontal Center"

. Nav-item: Control content vertically centered;

"Display: Restrict content side-by"

. Nav Span: Limit picture display range;

"Padding-left: Leave a display space for the picture; display: Fit to show"

. Nav img: Limit image size and display position;

Perfect, just because it's simple.

