css居中

水平居中

行内(inline)或者inline-*元素（如文本或链接）

将inline元素包裹在块状元素内，使用：

.center-children {
  text-align: center;
} 

这种方法用于inline,inline-block,inline-table,inline-flex等类型的元素。

块状(block)元素

可以将该元素的margin-left和margin-right的值设置为auto（前提是该元素已经设置了width）：

.center-me{
  margin: 0 auto;
}

多个块状元素

• 如果需要将多个块状元素在同一行水平居中，需要改变元素的display属性。下面是将display设为inline-block 和 flex的例子:
  点我看例子

• 如果需要的是多个块状元素不是并排居中而是上下排列，依然可以设置auto margin：
  点我看例子

垂直居中

行内(inline)或者inline-*元素（如文本或链接）

单行

• 有时行内元素/文本可以垂直居中，是因为包含它的元素padding-top 和 padding-bottom是相等的：

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

点我看例子

• 在某些情况下如果不能使用padding，那么可以设置包含文本的元素的line-height等于其高度，即可将文本垂直居中。

.center-text{
  height:100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

相等的上下padding也可以居中多行文本，如果这不起作用，那么可以将文本所在的元素放在一个表格单元格里，或者是用css让元素表现得像表格单元格（如：display: table-cell），此时，vertical-align可以解决居中的问题。
点我看例子
如果不用表格的方式，可以使用display: flex

.flex-center-vertically{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

点我看例子
需注意：上面的方法的前提是父元素有固定的高度（px,%等）。
如果上述所有方法都用不了，可以使用"ghost element"，即一个和元素高度一样的伪类，然后让文本元素vertical-align: middle。

.ghost-center::before{
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align:middle;
}
.ghost-center p{
  display: inline-block;
  vertical-align: middle;
}

点我看例子

块状(block)元素

有高度(height)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;/* 如果没有用box-sizing: border-box,则需要结合padding和border计算 */
}

点我看例子

高度不确定

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

点我看例子

使用flexbox

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

点我看例子

垂直水平居中

元素有固定宽高

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

点我看例子

宽高不固定

如果宽高不确定，可以使用transform属性，在垂直和水平方向上的translate为-50%。

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

点我看例子

使用flexbox

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

点我看例子

使用grid

body, html {
  height: 100%;
  display: grid;
}
span { /* 要居中的元素 */
    margin: auto;
}

点我看例子