CSS の中央揃えを実現するにはどうすればよいですか? ?CSS の共通メソッド centering_html/css_WEB-ITnose

出典: http://www.ido321.com/824.html

1. 水平方向の中央揃え

1. インライン要素の中央揃え: 親ブロックレベル要素を基準にして中央揃え

   1: .center-children {

   2:   text-align: center;

   3: }

2. ブロックレベルの要素を中央に配置します: margin-left と margin-right を auto に設定して中央に配置します (幅も設定します。そうしないとコンテナ全体が埋まってしまい、中央揃えの効果が見えなくなります)

   1: .center-me {

   2:   margin: 0 auto;

   3: }

行内で水平方向の中央に配置する必要があるブロックレベルの要素が多数ある場合は、別の表示タイプを使用するのが最善です。以下は、inline-block と flex を使用した例です。

デモアドレス: http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/

   1: <main class="inline-block-center"></main>

   2:   <div> <pre style="代码" class="precsshei">   3:     I'm an element that is block-like with my siblings and we're centered in a row.

   4: