css垂直居中的方法

元素垂直居中方法

1、方案一:

• 给容器设置
  position:relative;
• 给子元素设置
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

2、方案二：

• 给容器设置
  position:relative;
• 给子元素设置
  position:absolute;
  left:50%;
  top:50%;
  margin-left:元素自身一半;
  margin-top:元素自身一半;

3、方案三：

• 给容器设置
  position:relative;
• 给子元素设置
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

4、方案四：弹性布局

• 给容器设置
  display:flex;
  justify-content:center;
  align-items:center;