[css] listを縦並びのまま中央寄せする方法

文章行頭は左揃えのままリストコンテンツを中央寄せにする方法をメモっておく。

色々な記事みて探ったけど、このやり方が一番いいっぽい。
ulにfloatかけてるので親要素で解除するのを忘れずに

ul {
   float:left;
   position:relative;
   left:50%;
}

li {
   position:relative;
   left:-50%;
}

• ulにfloatをかけてリストコンテンツの横幅をコンテンツ内要素の幅と一致させる
• ulにposition: relative;とleft: 50%;でliコンテンツの起点を親要素の中央に
• その後にliにposition: relatibeとleft: -50%;でliコンテンツ幅の半分を右に寄せること全体が中央寄せになる

この方法ならコンテンツの中身やデバイスサイズに依存せずに中央寄せできるので便利！

追記

• スマホサイトの場合、left: 50%;で左にずらした分、コンテンツが画面幅をオーバーしてしまう場合がある
• ::afterでclear: both;入れる方法でfloatを解除すると画面が横にうにょうにょ動いちゃう
• なので親要素にoverflow:hideen;つけて解除する方が良いみたい