跨度绝对位置不以顶部和左侧为中心答案

【问题标题】：Span position absolute is not centered with top and left跨度绝对位置不以顶部和左侧为中心
【发布时间】：2017-12-28 19:08:04
【问题描述】：

我想创建一个带有 css 跨度和绝对位置的“X”，但跨度即使应该居中也不居中。

容器具有1px 的font-size。以及100em 的height 和width。因此我可以使用1em 作为父母大小的 1%。

我在跨度上使用了transform-origin: 0px 5em;，在不改变起点的情况下旋转它。元素以 20% top 和 left (20em) 开始，以 80% 结束（顶部和左侧）。

为了得到所需的width，我简单地计算了：Square root( square of (60) * 2)（勾股定理）（60，因为开始和结束 20 -- 100-20*2）

但由于某种原因，X 显然没有居中。你知道我做错了什么吗？

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 20em;
    left: 20em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 20em;
    left: 80em;
}





.check.red:hover span
{
    width: 84.852813742em;
}

<body>
    <div class="check red">
        <span></span>
        <span></span>
    </div>
</body>

【问题讨论】：

它在这里，但你也使用了变换原点。一旦旋转以补偿，边缘就会下降:)

标签： css

【解决方案1】：

这不是一个自动的解决方案，但改变你的 css 中的一些值我解决了它：

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 18em;
    left: 22em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 18em;
    left: 78em;
}





.check.red:hover span
{
    width: 78em;
}

<body>
    <div class="check red">
        <span></span>
        <span></span>
    </div>
</body>

【讨论】：

我更改了一些值，直到它看起来更好^^如果我解决了您的问题，请标记我的答案
好的。但是您是否还可以补充说它不是一个完美的解决方案？因为它解决了问题，但在创建其他形状时无助于避免它

【解决方案2】：

您可以做一些事情来让这里的生活更轻松。

首先您可以使用百分比转换原点，这意味着您不需要自己计算。
您还可以使用百分比定位，然后使用变换（同样使用百分比）偏移以居中，无论大小如何。
您还可以使用百分比设置十字的宽度，该百分比将从其父项中获取大小。

更新：使用背景渐变将十字从顶部而不是中心更改为动画。

.check
{
    position: relative;
    height: 200px;
    width: 200px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 0px 10px red inset;
}

.check span
{
    position: absolute;
    display: block;
    height: 20px;
    width: 0%;
    background: linear-gradient(to right, white 50%, red 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transition: background 0.3s ease;
}
.check.red span
{
    transform: translate(-50%, -50%) rotate(-45deg);
}

.check.red span:last-child
{
    transform: translate(-50%, -50%) rotate(-135deg);
}

.check.red:hover span
{
    background-position: right bottom;
    width: 70%;
}

<div class="check red">
  <span></span>
  <span></span>
</div>

【讨论】：

但是否也可以让动画更像是某人写了一个X？最初我的第二个跨度有.3s延迟。这样看起来有人写了两行（都从顶部开始）来创建一个X（你的动画从中心开始）
我已经更新了答案以反映从顶部开始的动画，而不是中心。

【解决方案3】：

试试这个使用margin-top:-0.5rem;

.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s; margin-top:-0.5rem;
}

body
{
    margin: 0px;
}
.check
{
    font-size: 1px;
    position: relative;
    height: 100em;
    width: 100em;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0px 0px 10px red inset;
   
}



.check span
{
    position: absolute;
    display: block;
    height: 10em;
    width: 0px;
    background-color: #00FF00;
    transition:.3s; margin-top:-0.5rem;
}
.check.red span
{
    background-color: #FF0000;
    transform-origin: 0px 5em;
    transform: rotate(45deg);
    top: 20em;
    left: 20em;
}
.check.red span:nth-of-type(2)
{
    transform: rotate(135deg);
    top: 20em;
    left: 80em;
}





.check.red:hover span
{
    width: 84.852813742em;
}

<body>
    <div class="check red">
        <span></span>
        <span></span>
    </div>
</body>

【讨论】：

这还没有居中
居中是什么意思？
span元素到父边框的距离。在您的 sn-p 上，顶部的距离要短得多。（至少在 Firefox 和 chrome 中）