Clear + CSS to achieve a floating center

First, the middle level

1, the line elements: text-align: center;

2, block-level elements: margin: 0 auto;

3, absolute positioning and movement: absolute + transform

4, absolute positioning and negative margins: absolute + margin

5, flex layout: flex + justify-content: center

 

Second, vertical centering

1, the sub-line text element: line-height: constant height / padding

2, absolute positioning and movement: absolute + transform

3, absolute positioning and negative margins: absolute + margin

4, flex layout: flex + align-items: center

5、table：display:table-cell; vertical-align:middle;

 

Third, the horizontal and vertical center

1, width and height known elements: Absolute positioning + margin: auto

　　width:200px;height:200px;

　　position:absolute;left:0;right:0;top:0;bottom:0;

　　margin:auto;

 

2, width and height known elements: a negative margin absolute positioning +

　　width:200px;height:200px;

　　position:absolute;left:50%;top:50%;

　　margin-top:-100px;margin-left:-100px;

 

3、absolute + transform

　　position:absolute; left:50%; top:50%;

　　transform: translate (50%, 50%) 50% own;

 

4、flex + justify-content + align-items

　　display:flex;

　　justify-content:center;

　　align-items:center;

 

5、grid + margin

　　body,html{ height:100%; display:grid;}

　　span{ margin:auto;}

 

Fourth, the common method of clearing floats:

1, to increase the height of the parent element (height), applies only to the height of a fixed layout

2, increase at the end of an empty tag div tag, clear: both

　　Is not conducive to the code semantics, is not conducive to on-page optimization and maintenance

3, div to define pseudo-class Parent: after zoom and

　　.clearfix:after{display:block; clear:both; content:""; visibility:hidden; height:0;}

　　.clearfix{zomm:1}

4, to increase the parent element style: overflow: hidden

　　And position can not be used in conjunction with, because more than part will be hidden.