css中表格行垂直居中

CSS中表格的设计经常会用到垂直居中，下面介绍如何实现表格行的垂直居中。

/*第一种方法：使用vertical-align属性*/table {
      width: 100%;
      border-collapse: collapse;
}
td, th {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
      vertical-align: middle;
}
/*第二种方法：使用line-height属性*/table {
      width: 100%;
      border-collapse: collapse;
}
td, th {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
      height: 50px;
      line-height: 50px;
}
/*第三种方法：使用display:flex*/table {
      width: 100%;
      border-collapse: collapse;
}
tr {
      display: flex;
      align-items: center;
}
td, th {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
}
    

以上是三种实现表格行垂直居中的方法，使用其中一种或多种方法可以轻松实现表格行垂直居中。

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