CSS 水平居中/垂直居中的方式

水平居中/垂直居中的方式

水平居中

• 行内元素，给其父元素设置 text-align:center;
• 块级元素：margin: 0 auto;(在设置with的情况下才有用，因为默认with是100%)
• 利用flex布局，在父元素中设置：

.father{
  display: flex;
  justify-content: center;
}

• absolute + left + transform

.box{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}

• 设置父元素相对定位(position:relative), 子元素设置如下:

.box{
  position: absolute;
  width:固定;
  left: 50%;
  margin-left: -0.5width;

}

垂直居中

• 单行文本, 设置 line-height 等于父元素高度

• 可用 vertical-align 属性, 而vertical-align只应用于行内元素（图像、文本）和表格元素才会生效。
  对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;
  vertical-align:middle;

• absolute + transform

.box{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
}

• flex布局,父元素设置如下：

.box{
  display: flex;
  align-items: center;
}

• 设置父元素相对定位(position:relative), 子元素如下css样式:

.box{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top:-50px;/*-0.5height*/
}