CSS setting horizontally vertically centered

Want to center horizontally?

• Inline elements (text)?

  { text-align: center;}

• Block-level elements?

  { margin: 0 auto;}

• What if there are multiple block-level elements?

  {  text-align: center;  }  {  display: inline-block;   Text-align: left;}  {display: flex;  Justify-content: center;}

Want to center vertically?

• An inline element?
  • If there is only one line, you can set the upper and lower padding to the same value.
  • If it is multi-line text, you can simulate the table.

    . Center-table{Display:Table;Height:250px;background: White;width:240px;margin:20px;}. center-table P{Display:Table-cell;margin:0;background:Black;Color: White;padding:20px;Border:10px Solid White;vertical-align:Middle;}. flex-center-vertically{Display:Flex;justify-content:Center;flex-direction:column;Height:400px;}block-level elements? Know the element height?. Parent{position:relative;}. Child{position:Absolute;Top:50%;Height:100px;Margin-top:-50px;/*Account for padding and border if not using Box-sizing:border-box;*/}

• element height unknown?

   .parent  {position :  relative ;} .child  {position :  absolute ; top :  50% ; transform :  Translatey ( -50%) ;} 

   

• Flex layouts

  {display: flex; flex-direction: column; justify-content: center;}

  　Original address:

  　　Http://www.jianshu.com/p/14d519bc8c30

CSS setting horizontally vertically centered