Question

我正在尝试将.spinner元素垂直居中于以下标记（fiddle）中：

<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属性设置为某个像素值，则浏览器会根据值实际定位它，但如果我尝试将其设置为百分比，则无效。< / p>

如何垂直居中.spinner元素？

注意：我知道我可以将.grid位置设置为相对位置，将.spinner位置设置为绝对位置，但我更愿意将网格静态定位。这是否可以在不修改.grid样式的情况下实现？

Answer 1

首先，您应该使用absolute定位，.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所在的位置玩）。您可以使用所需的负边距或相对定位来解决此问题，但它永远无法适应动态内容（使用当前的浏览器/标准集）。

垂直居中，“位置：相对”和“顶部：50％”

1 个答案: