一、水平居中

centering-css-complete-guide

1、行内元素

text-align: center;
One Two Three Four

2、块级元素

margin: 0 auto;
div

3、多个块级元素

display: inline-block;
div1
div2
div3
{
  display: flex;
  justify-content: center;
}
div1
div2
div3

二、垂直居中

1、行内元素

a、单行

{
  padding-bottom: 20px;
  padding-top: 20px;
}
abc
{
  height: 100px;
  line-height: 100px;
}
111

b、多行

table
去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼 
{ 
  display: table-cell; 
  vertical-align: middle; 
}
去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼 
{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼 
::before

去吗 配吗 这褴褛的披风 战吗 战啊 以最卑微的梦 致那黑夜中的呜咽与怒吼

2、块级元素

元素高度已知

postion、top
ddd

元素高度未知

postion、top、transform
ddd

拉伸高度

{
  display: table-cell;
  vertical-align: middle
}
ddd

flex

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

三、水平且垂直居中

元素宽高已知

postion、top、left、margin
ddd

元素宽高未知

postion、top、left、transform
ddd

flex

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

grid

{
  display: grid;
  justify-items: center;
  align-items: center;
}
ddd