css - `position: relative` 和 `top: 50%` 垂直居中

Question

我试图在以下标记 ( fiddle ) 中将 .spinner 元素垂直居中:

<div class=grid>
  <div class=spinner></div>
  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
  </table>
</div>

具有以下样式:

.spinner {
    position: relative;
    top: 50%;
    left: 50%;
    height: 3px;
    width: 3px;
    background-color: red;
}

如果我将 .spinner top 属性设置为某个像素值，浏览器实际上会根据该值对其进行定位，但如果我尝试将其设置为百分比, 它不起作用。

如何使 .spinner 元素垂直居中？

注意:我知道我可以将 .grid 位置设置为相对位置，将 .spinner 位置设置为绝对位置，但我更愿意保持网格静态定位。如果不修改 .grid 的样式，这是否可能？

Answer 1

首先，您应该使用绝对 定位，将.grid 设置为relative 定位。然后，将 top、bottom、left 和 right 设置为 0 .spinner 元素。由于您有固定的 width/height，与 margin:auto; 一起的定位将使元素完美居中(example):

.grid {
    position:relative;
}
.spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    height: 3px;
    width: 3px;
    background-color: red;
}

table {
    width: 100%;
}

在回应你最后的注释时，不，.grid 元素的静态定位是不可能的(除非你在 .grid 元素中添加一个包装器).这是因为 .spinner 元素在没有某种具有相对定位的容器(这是 position:relative; 的位置)的情况下无法知道表格的高度尺寸在 .grid 元素上发挥作用)。您可以根据需要使用负边距或相对定位来解决此问题，但它永远无法容纳动态内容(使用当前的浏览器/标准集)。