CSS水平和垂直居中的实现

侵删

一、水平居中

1、行内元素：主要取决于行内元素的父元素是否是块级元素

• 是块级元素

  父元素{
      text-align:center;
  }

• 不是块级元素

  父元素{
      display:block;
      text-align:center;
  }

2、块级元素：有宽度是否设定之分

1）方法一

• 定宽

  该元素{
      margin:0 auto;
  }

• 不定宽

  该元素{
      display:block / inline-block; 
      text-align:center;
  }

2）方法二

父元素{
    position:relative;
}
子元素{
    position:absolute; 
    left:50%
}

• 定宽

  子元素{
      margin:负元素宽度的一半 / transform:translateX(-50%);
  }

• 不定宽

  子元素{
      transform:translateX(-50%);
  }

3）方法三

使用flex布局，不计宽度。

父元素{
    display:flex; 
    justify-content:center;
}

---

二、垂直居中

1、单行行内元素

将该元素的高度设置为等于盒子的高度

2、多行行内元素

父元素{
    display:table-cell; 
    vertical-align:middle;
}

3、块级元素

1）方法一

父元素{
    position:relative; 
}
子元素{
    position:absolute; 
    top:50%;
}

• 定宽

  子元素{
      margin-top:负元素高度的一半 / transform:translateY(-50%);
  }

• 不定宽

  子元素{
      transform:translateY(-50%);
  }

2）方法二

使用flex布局。

父元素{
    display:flex; 
    align-items:center;
}

---

三、水平垂直居中

1、已知元素的宽高

1）方法一

父元素{
    position: relative
}
子元素{
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto;
}

2）方法二

父元素{
    position: relative;
}
子元素{
    position: absolute; 
    left: 50%; 
    top:50%;
    margin-left:负元素宽度的一半;
    margin-top:负元素高度的一半;
}

2、未知元素的宽高

1）方法一

父元素{
    position:relative;
}
子元素{
    position:absolute; 
    left:50%; 
    top:50%;
    transform:translateX(50%);
    trasform:translateY(50%);
}

2）方法二

使用flex布局。

父元素{
    justify-content:center; 
    align-items:center;
}