CSS Center Complete Solution

Last interview the interviewer asked, asked a fixed-width bureau and the indefinite wide bureau, down I put all the CSS in the center of the summary

Original digest self of front-end blog, welcome everyone to visit

http://www.hacke2.cnCenter inline elements horizontally

Nest the inline elements in a div, and set the following styles in the Div

a{text-align: center;}

Block-level elements

For a fixed-width block-level element, we want to set the Margin-top,margin-right to auto

.center{margin: 0 auto;}

Multiple block-level elements (Inline-block)

Multiple block-level elements, we set its display to Inline-block, and then set the parent element to the property

div{text-align: center;}

Multiple block-level elements (Flex)

Set the parent element of the block element that needs to be centered horizontally display as Flex, and the Justify-content property is center

body{  display: flex; justify-content: center;}

Vertically centering single-line inline elements

Set the height and line-height of the inline elements to be consistent

a{  height: 200px; line-height:200px; }

Multi-line inline elements

If there are too many lines in the inline element text, the parent element is set to Display:table-cell;vertical-align:middle;

.container{width: 300px;height: 300px;display: table-cell;vertical-align:middle;}

Block-level elements with known heights

Set block-level elements to absolute positioning, top for 50%,MARGIN-TOP:-HEIGHT/2

div{  height: 100px; position: absolute; top: 50%; margin-top: -50px; padding:0; }

Block-level elements with unknown heights

Using CSS translate, set block-level elements to absolute positioning, top for 50%,transform:translatey (-50%);

div{  position: absolute; top: 50%; transform: translateY(-50%); padding:0; }

Horizontally vertically centering elements of a known height, width

Set block-level elements to absolute positioning, top for 50%,LEFT:50%;MARGIN-TOP:-HEIGHT/2;MARGIN-LEFT:-WIDTH/2

div{width: 150px;height: 150px;position: absolute;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;}

Elements with a known height, width (flex)

Use Flex layout for parent

div{display: flex;justify-content:center;align-items: center;}

Elements with unknown height and width

Using CSS Translate

Div{Position:Absolute;Top:50%; Left:50%; -webkit-transform:translate< Span class= "P" > (-50%,-50%); moz-transform:translate  (-50%,-50%);  Transform:translate (-50%,-< Span class= "M" >50%);                /span>                

CSS centered full solution