css实现div内容垂直居中

CSS实现内容垂直居中的方法有很多种，下面介绍几种常用的方法：

（一）使用Flexbox布局方法步骤：1、给包含div>
    的父元素设置display:flex;
    2、对div>
    设置margin:auto;
...例子：.parent{
      display:flex;
      align-items:center;
      justify-content:center;
}
.child{
      margin:auto;
}
    

（二）使用position和transform属性方法步骤：1、对div>
    设置position:relative;
    2、对div>
    的子元素设置position:absolute;
    3、对子元素设置top:50%和transform:translateY(-50%);
...例子：.parent{
      position:relative;
}
.child{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
}
    

（三）使用table-cell方法方法步骤：1、对包含div>
    的父元素设置display:table;
    2、对div>
    设置display:table-cell;
    3、对div>
    设置vertical-align:middle;
...例子：.parent{
      display:table;
}
.child{
      display:table-cell;
      vertical-align:middle;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！