CSS元素居中

水平居中

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

.container {
  text-align: center;
}

2. 块级元素居中：

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

垂直居中

1. 容器高度不固定，高度由内容撑开，上下padding相等

  

    
这里是饥人谷
    
这里是饥人谷
  

2. 绝对定位实现居中

html,body {
  height: 100%;
}


.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header{
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content{
  padding: 10px;
}


  

    
我是标题
    
我是内容
  

3. table-cell实现居中

4. 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;
}

5. 针对display：inline-block的垂直居中vertical-align

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
}

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}