元のリンク: 水平 | 垂直方向の中央揃えを実現するための CSS の説明
CSS を使用して要素を水平方向に中央揃えにするのは比較的シンプルで簡単です。行レベルの要素は親のテキストの中央揃えを設定します。要素、ブロック レベル要素の左右のマージンを auto に設定するだけです。縦と真ん中のオナニーに関しては、初めてオナホをする人の多くは私と同じで内心抵抗があると思います。ここでは、会社の同僚の内部共有に基づいて、それを収集して改良し、縦方向中央揃えの 8 つの CSS 記述方法を入手しました。サンプルデモと、コードと長所と短所についてのコメントがあります。
CSS は水平方向のセンタリングを実装します (3 つのメソッド)
CSS は垂直方向のセンタリングを実装します (8 つのメソッド)
CSS テキストの垂直方向のセンタリング (5 つのメソッド)[更新: 2016-01-06 ]
追伸: CSS に十分精通していれば、CSS の複数の属性と組み合わせることができる「奇妙なトリック」が無限にあるはずだと思います。ここでは、その一部を集めてみました。誰もがよく使う単純な部分です。
注: そうですね、週末は残業しなければならないので、必要に応じてブログ全体を作成するのはかなり時間がかかります。中心にある例を書いているときに、何も見つかりませんでした。適切な言葉を見つけたので、「Shi Xing Da Fa」という、Te Hu Zuo の自虐的でナンセンスな言葉を無理やり内容に記入しました。それができることを祈りながら、以下に投稿します。同僚と喜びを分かち合いましょう。
周末把码黄昏后,有咸香盈袖。莫道不消魂,独弄键盘,人比黄花瘦。真可谓:天堂有路你不走,学海无涯苦作舟。到头来:码山有路勤为径?三十功名尘与土。饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。
追記: 2015 年 11 月 25 日の更新後、絶対センタリング をより包括的に説明する記事を CodePen で見ました。リンクは次のとおりです。 http://codepen .io /shshaw/full/gEiDt