CSS水平垂直居中常见方法

水平居中

行内元素（内联元素）

如、、、、等

直接构建一个具有：text-align: center;样式的容器，那么里面包含的行内元素都会居中。

块级元素

如

、

、

、

、
• 、

  ---

  等。块级元素可以设置height、width，则分为定宽与不定宽。

  定宽

  margin: 0 auto; 实现容器居中

  text-align: center; 实现文本居中

  不定宽

  1. 直接把元素改为行内元素，即：display: inline;然后就可以用text-align: center;但是这样做有一个缺点就是不可以设置width和height了。

  2. 使用父级元素浮动和相对定位以及left: 50%；子元素left: -50%。

  水平垂直居中

  方案1：position元素、已知宽度

  父元素：position: relative;

  子元素：position: absolute;

  left: 50%，top: 50%，然后减去元素自身宽度的一半（margin: -50px 0 0 -50px;）

  方案2：position、transform元素、未知宽度

  将margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%)。

  方案3：flex布局

  父元素：

  display: flex;  //flex布局   

  justify-content: center;  //使子项目水平居中   

  align-items: center;  //使子项目垂直居中