Adaptive centering

1. Centering the form

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: The window size is determined by the parent-child relationship window with the upper position of absolute, fixed, relative Determined; fixed: The window size is determined by the parent-child relationship window with the upper layer position fixed]

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

　　 [When set to auto, Indicates that the window is not centered in this direction; for example: left:auto, the window is not centered in the horizontal position】

　Margin: adaptive layout (auto);

　　【The window will only be centered in the direction where both are auto】

　 Height, width: can be set or not (|auto);

　　 [If not set, the size will be determined by top, right, bottom, left]

2. Text and picture mixed and adaptive centering

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;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;display: 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 }

A brief analysis:

　.nav: Limit window size;

　　【text-align: Limit span to be centered horizontally】

　 .nav-item: Control content to be centered vertically;

　　【display: Limit content to be displayed side by side】

.nav span: Limit the display range of the image;

　　【padding-left: Leave display space for the image; display: adapt to the display】

　 .nav img: Limit the size and display position of the image;

Perfect, just because of its simplicity.