css 在死点对齐工作台

zy1mlcev  于 2022-12-20  发布在  其他
关注(0)|答案(2)|浏览(102)

我有一个表格需要在页面的正中心对齐。但我不知道如何垂直对齐。
要做到这一点,什么是有效的方法?

#textcenter {
  vertical-align: middle;
  display: table-cell;
  background-color: #DCDCDC;
  border-radius: 25px;
  margin: auto;
}
<table ALIGN="center" id="textcenter">
  <th>Hello</th>
</table>
bis0qfac

bis0qfac1#

如果您希望它无论如何都位于页面的中心,请使用absolute

.center{
  /* Center Code */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Your Code */
  background-color: #DCDCDC;
  border-radius: 25px;
  margin: auto;
  /* Improved Styling - You can ignore this */
  padding: 5px;
}
<table class="center">
  <th>Hello</th>
</table>

您还可以在外部创建flex容器。

wnvonmuf

wnvonmuf2#

假设你的table有固定的宽度和高度...
可以使用值为“auto”的“margin”属性使表格在页面上水平和垂直居中:

<style>
  .center {
    margin: auto;
  }
</style>

<table class="center">
  <tr>
    <td>Table cell</td>
  </tr>
</table>

或者,“text-align”和“vertical-align”属性将分别使表格在其父元素内水平和垂直居中:

<div style="text-align: center; vertical-align: middle;">
  <table>
    <tr>
      <td>Table cell</td>
    </tr>
  </table>
</div>

如果表格的宽度和高度不是固定的,它将根据内容进行扩展,并且可能不会精确居中。在这种情况下,您可以使用"显示:flex“和”对齐项目:center'属性,使表格在其父元素中居中:

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

<div class="parent">
  <table>
    <tr>
      <td>Table cell</td>
    </tr>
  </table>
</div>

相关问题