Question

如何将/api/api_endpoint_x/?time_start=2015-11-20 11:22:15.160983+00:00元素定位到父元素高度的50％？

我无法通过js访问:after动态更改，这将是一个简单的计算。

元素是:after，div的相对绝对位置应该具有div高度的50％的最高值。

Answer 1

试试这个：

div {
  height: 200px;
  width: 200px;
  background-color: blue;
  display: table;
}
div:after {
  content: "Hello";
  display: table-cell;
  vertical-align: middle;
}

<div></div>

Answer 2

您的要求不明确，但一般来说，如果您使用的是绝对定位，那么定位只是百分比问题。这也适用于伪元素的维度。

＆＃13;

div {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 1em auto;
  background: grey;
}
div::after {
  content: 'Hello';
  position: absolute;
  top: 50%;
  left: 0;
  background: #c0ffee;
  height: 50%;
  transform: translateY(-50%); /* vertical center */
  width: 50%;
  text-align: center;
  line-height: 75px;
}

＆＃13;

<div></div>

＆＃13;

Answer 3

如果您的伪元素绝对定位，那么简单地设置top: 50%应该可以将伪元素的上边缘放在父元素的中间。

否则，如果您需要完全垂直中间对齐，则将其转换回50％：

div::after {
    content: "...";
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
}

这将首先将伪元素的顶部定位在其元素的中间，然后将其向上平移（在Y坐标中）为其自身高度的一半。

小提琴：https://jsfiddle.net/abhitalks/mmxxwt6f/

<强>段：

div {
	position: relative;
	height: 200px; width: 200px;
	background-color: #66a;
}
div::after {
	content: "Middle";
	position: absolute;
	top: 50%; left: 0;
	transform: translateY(-50%);
}

<div></div>

如何定位：在元素之后达到目标元素高度的50％

3 个答案: