CSS垂直居中無固定高度

CSS垂直居中是一種常用的網頁布局技術，可以讓文本、圖片、表格等元素垂直居中，使網頁布局更加美觀和靈活。但是，對于一些元素，如表格單元格，垂直居中需要使用固定高度，這會導致頁面布局不夠靈活。現在，我們可以通過使用CSS的`display: flex`和`align-items: center`屬性，實現無固定高度垂直居中。

下面以一個表格為例，展示如何使用`display: flex`和`align-items: center`屬性來實現無固定高度垂直居中。

<table>

<tr>

<td>單元格1</td>

<td>單元格2</td>

<td>單元格3</td>

</tr>

</table>

在上面的代碼中，我們使用了`display: flex`屬性將表格轉換為一個flex容器，并使用`align-items: center`屬性將表格單元格垂直居中。

<table>

<tr>

<td>單元格1</td>

<td>單元格2</td>

<td>單元格3</td>

</tr>

</table>

在上面的代碼中，我們使用了`display: flex`屬性將表格轉換為一個flex容器，并使用`justify-content: center`和`align-items: center`屬性將表格單元格垂直和居中。

<table>

<tr>

<td>單元格1</td>

<td>單元格2</td>

<td>單元格3</td>

</tr>

</table>

在上面的代碼中，我們使用了`justify-content: center`屬性將表格單元格垂直居中，并使用`align-items: center`屬性將表格單元格水平居中。

需要注意的是，如果表格中包含行和列，則需要在`align-items`屬性中使用`flex-end`來使列垂直居中，而使用`flex-start`來使行水平居中。

通過使用`display: flex`和`align-items: center`，我們可以實現無固定高度垂直居中，使網頁布局更加美觀和靈活。