水平/垂直居中的方法

水平居中的方法

• 元素为行内元素，设置父元素text-align:center
• 如果元素宽度固定，可以设置左右margin为auto;
• 绝对定位和移动: absolute + transform
• 使用flex-box布局，指定justify-content属性为center
• display设置为tabel-ceil

垂直居中的方法

• 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle

• 使用flex布局，设置为align-item：center

• 绝对定位中设置bottom:0,top:0,并设置margin:auto

• 绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值

• 文本垂直居中设置line-height为height值

• 如果是单行文本, line-height 设置成和 height 值

.vertical {
    height: 100px;
    line-height: 100px;
  }

• 已知高度的块级子元素，采用绝对定位和负边距

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

• 未知高度的块级父子元素居中，模拟表格布局
• 缺点：IE67不兼容，父级 overflow：hidden 失效

.container {
    display: table;
  }
  .content {
    display: table-cell;
    vertical-align: middle;
  }

• 新增 inline-block 兄弟元素，设置 vertical-align
  • 缺点：需要增加额外标签，IE67不兼容

.container {
  height: 100%;/*定义父级高度，作为参考*/
}
.extra .vertical{
  display: inline-block;  /*行内块显示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*设置新增元素高度为100%*/
}

• 绝对定位配合 CSS3 位移

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

• CSS3弹性盒模型

.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}