一：水平居中

1、行内元素水平居中

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {  text-align: center;}

2、块级元素水平居中

• 先给块级元素设置宽度（不设置宽度，块级元素自己占据一整行，何谈居中）
• 再给块级元素设置margin：0 auto;（当上下margin不一定是0，可以按照需求来设置）

.container {  width: 200px;  margin:  0 auto;}

二、垂直居中

1、块级元素内部垂直居中

原理：设置块级元素上下padding相等

前提：没有设置高度，高度由内容撑开。块级元素如果设置了高度，就不知道如何设置padding的数值

 
    
    
     
好好学习
    
     
天天向上
  
    

执行结果

2、绝对定位实现垂直居中

（1），

使用前提是块级元素的宽高固定

    
    
     
      我是标题
     
    
     
      我是内容
     
  
    

（2）解析：

使用绝对定位 position: absolute，让dialog起点偏移到页面的中央

通过负margin，偏移dialog宽高的一半，让dialog处于正中。不用relative的原因是已经用了绝对定位了，所以只好用负margin。结果如图

（3）块级元素的宽高不固定，就不能用负margin了（margin使用百分比是相对于父元素的宽度）。我们可以用css3的一个transform的属性，transform是相对自身的宽高来做偏移的。

3、vertical-align实现水平垂直居中

原理：

• 通过text-align:center 实现水平居中
• 通过伪元素设置一个内容为空的元素，设置高度为100%，通过vertical-align实现基线对齐。

使用环境：块级元素中设置行内元素水平垂直居中

代码：结果：

遇坑：1、当然使用绝对定位也可以实现这个效果

2、伪元素设置display：block是有问题，需要设置为inline-block

3、使用伪元素是为了减少标签

4、table-cell实现居中

原理：把box设置为表格元素（display: table-cell），通过vertical-align: middle对里面的元素做垂直居中

缺点：把box设置为display: table-cell，box不再是块级元素，如果不设置宽度就会收缩。

代码：结果：

5、display: flex实现

代码：

    
  
     
    
.space {  width: 100vw;  height: 100vh;  /* 设置宽高以显示居中效果 */  display: flex;  /* 弹性布局 */  align-items: center;  /* 垂直居中 */  justify-content: center;  /* 水平居中 */}body {  margin: 0;  background: rgba(0, 0, 0, .95);}.earth::after {  content: '?';  font-size: 85px;}