Summarize the solution of CSS centering problem

Summary of problems encountered in CSS Center

Center horizontally

• "Inline elements" for inline,inline-block,inline-table,inline-flex elements

  . center {  Text-align:center;}

• Block level element applies to the block levels element

  ① a block-level element

     . center {margin:0 Auto;   }

  ② multiple block-level elements

  Method One: Change block-level elements into inline block-level elements HTML section: <main class= "Inline-block-center" >  <p>1</p>  <p>2</p >  <p>3</p></main>css section:. inline-block-center {  text-align:center;}. Inline-block-center p {  display:inline-block;  Text-align:left;} Method Two: Flex Layout HTML section: <main class= "Flex-center" >  <p>1</p>  <p>2</p>  < P>3</p></main>css part:. flex-center{    Display:flex;  Justify-content:center;}

Center vertically

• "Inline Element"

  ① a single inline element:

  Case one: When link or text has a wrapping element, set the equal upper and lower padding

  . link {  padding-top:30px;  padding-bottom:30px;}

  Scenario Two: Set row height and height equal when link or text does not have a package

  . center-text-trick {  height:100px;  line-height:100px}

  ② Multiple inline elements:

  Method One: Place multiple inline elements in the HTML section of Table-cell:<table> <tr><td> 1</td> </tr></table>  CSS section: Table td {Background:black;  Color:white;  padding:20px;  border:10px solid white; /* default is Vertical-align:middle; */} Method Two: Set the parent element to display:table, set itself to the display:table-cellhtml section: <p class= "center-table" > <p>1</p>  </p>css section:. center-table {display:table;  height:250px; width:240px;}.  Center-table p {Display:table-cell; Vertical-align:middle;}  Method Three: Use felexhtml part: <p class= "Flex-center" > <p>1</p></p>css section:. flex-center{Display:flex;  Justify-content:center;  Flex-direction:column; height:400px;/* The parent container must have a fixed height */} Method Four: When the above code is not available, you can try this strange trick HTML part: <p class= "Ghost-center" > <p>1</p> </p>css section:. ghost-center {position:relative;}.  Ghost-center::before {content: "";  Display:inline-block;  height:100%;  width:1%; Vertical-align:middle;}.  Ghost-center p {display:inline-block; Vertical-aliGn:middle;} 

• "Block-level elements"

  ① known element height (absolute positioning + negative margin)

  . parent {  position:relative;}. Child {  Position:absolute;  top:50%;  height:100px;  Margin-top: -50px; /* For half of the height of the element, no box-sizing, half of the Height+padding+border */}

  ② unknown element height (similar to the previous method)

  . parent {  position:relative;}. Child {  Position:absolute;  top:50%;  Transform:translatey (-50%);}

  ③flex layout

  . parent {  Display:flex;  Flex-direction:column;  Justify-content:center;}

Horizontal Vertical Center

① with fixed, wide-height elements

. parent {  position:relative;}. Child {  width:300px;  height:100px;  padding:20px;  Position:absolute;  top:50%;  left:50%;  Margin: -70px 0 0-170px;/* Note this is half of the height+padding+ */}

② no fixed-width-height element (same as previously no fixed-width-high element, solved with transform)

. parent {  position:relative;}. Child {  Position:absolute;  top:50%;  left:50%;  Transform:translate (-50%,-50%);}

③ using Flexbox layouts

. parent {  Display:flex;  Justify-content:center;  Align-items:center;}