css - パーセンテージ 50% の絶対配置

Question

私はこれから答えを見つけました： 予期しない結果をもたらすパーセンテージによる絶対配置

しかし、答えはまったく正しくありません 私の画面に表示されます

これがその答えのjsFiddleです。

#container {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}

#item {
    border: 1px dashed purple;
    position: absolute;
    left: 50%;
}

私はこの問題を抱えています。誰かが助けてくれれば、50% は親の幅の半分ではありませんか?

Answer 1

x と y のピクセル位置に関して、アイテム div はコンテナー div の幅の 50% (つまり、100px コンテナーの左から 50px) に配置されます。

コンテナの幅を広げると、それに応じてアイテム div の位置が表示されます。

Answer 2

次のスタイルを使用します。絶対値と負の値のスタイルは必要ありません:

#container {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    overflow: hidden;
    text-align: center;
}

#item {
    border: 1px dashed purple;
    display: inline-block;
    margin: 0 auto;
}

フィドル