表格不会使用 flexbox 垂直居中 [重复]
Posted
技术标签:
【中文标题】表格不会使用 flexbox 垂直居中 [重复]【英文标题】：Table won't vertically center using flexbox [duplicate] 【发布时间】：2019-09-23 09:53:15 【问题描述】：我正在尝试使用 flexbox 属性使表格垂直居中，但它不会居中。
我尝试过调整容器/子项的高度，但问题仍然存在。我还尝试了其他垂直居中方法，例如 display: table; / display:table-cell 或 positioning relative 的父级和 top: 50% ,left: 50%; 的绝对子级
.tableWrap
display: flex;
justify-content: center;
align-items: center;
table
width: 65%;
table-layout: fixed;
font-family: arial, sans-serif;
border-collapse: collapse;
border: 1px solid #dddddd;
word-wrap: break-word;
td,
th
border: 1px solid #dddddd;
padding: 8px;
text-align: center;
tr:nth-child(even)
background-color: #dddddd;
table ul
margin: 0;
padding: 0;
list-style: none;
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<main>
<div class="tableWrap">
<table>
<tr>
<th>Title</th>
</tr>
<tr>
<td>Test0:</td>
</tr>
<tr>
<td>Test1</td>
</tr>
<tr>
<td>Test2:</td>
</tr>
<tr>
<td>
<ul>
<li>Test3.</li>
</ul>
</td>
</tr>
</table>
</div>
</main>
</body>
</html>【问题讨论】：
flexbox 容器 (tableWrap) 仅与table 一样高 - 给它一个高度（比如 100vh），您可以看到垂直对齐。见jsfiddle.net/bchnt5os
哦，我现在明白了。成功了，谢谢！
***.com/a/46546152/3597276
【参考方案1】：
问题在于 body、html 和 .tableWrap 的高度。它们会自动降低高度。根据您的情况，解决方案是：
html,
body,
main,
.tableWrap
height: 100%;
【讨论】：
以上是关于表格不会使用 flexbox 垂直居中 [重复]的主要内容，如果未能解决你的问题，请参考以下文章