left:50%でどうして中央になるのですか？

left:50%でどうして中央配置になるのでしょうか？
・要素の左端はどこに合わせているの？
・どこからどこへ50%ずらすのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

こんんちは

leftだけでは中央配置にはなりません。
left:50%は親要素に対して自信が移動します。

しかし、それだけだと自身のwidthもあるので自身の半分ぶん飛び出してしまします。
そこでmargin-leftやtransformでネガティブな値を与えてあげることで自身の半分を左に持ってきます。

css
1    section{
2        width:100%;
3    }
4    p{
5        position:relative;
6        left:50%;
7        transform: translate(-50%);
8        -webkit-transform: translate(-50%);
9        display:inline-block;
10    }
11    div{
12        position:relative;
13        display:inline-block;
14        left:50%;
15        width:200px;
16        text-align: center;
17        margin-left:-100px;
18    }

html
1<section>
2    <p>aaaaaaaa</p>
3</section>
4<section>
5    <div>bbbbbbb</div>
6</section>

投稿2016/05/17 06:06

kogure

総合スコア299

re97

2016/05/18 03:42

・回答ありがとうございました・内容難しかったです＞自身のwidthもあるので自身の半分ぶん飛び出してしまします・これは何を指すのでしょうか？・pタグにはwidthを設定しいないと思うのですが… ・試しに「transform: translate(-50%);-webkit-transform: translate(-50%);」をコメントアウトしてみましたが、表示挙動を理解できませんでした(中央から少し右にズレただけ)

kogure

2016/05/19 05:02

こんにちは返信しておらずごめんなさい。。。＞・pタグにはwidthを設定しいないと思うのですが… widthを指定しなくてもp自体に中の要素分だけ横幅がありますよね？ <p>あああ</p>（「あ」3つ分の横幅）「あ」の横幅（仮に14pxだとしたら）「あ（14px）」* 3 で42pxがpのwidthになるかと思います。＞試しに「transform: translate(-50%);-webkit-transform: translate(-50%);」これが上記で述べたような自身（ここではpタグ？）のwidth分左に戻してる部分です。起点を中央にずらすイメージですかね。例えば-100%にするとp要素の一番右端が画面中央に来るかと思います。 0%だとp要素の一番左端が画面中央みたいな説明べたでごめんなさい。。。不足していたら再度質問してください

行動規範の内容に同意します