CSS実現センター

水平方向中央

水平中央は私たちが開発する過程で出会った非常に一般的なレイアウトです.次に、一般的な方法について簡単に説明します.

margin: auto

text-align

flex

position位置決め

margin: auto
最も簡単に水平中心を実現するには、ターゲット要素に幅がある必要があります.この方法はブロックレベル要素(block)にのみ有効であることに注意してください.

text-align

可以实现块级元素内部的行内元素水平居中，注意，此方法只对 行内元素(inline)、行内块(inline-block)、行内表(inline-table)、inline-flex 元素 水平居中都有效
当有多个行内元素相邻时，也能生效

位置付け
下のコードを見ると、まず親要素にposition: relative行を追加し、次にターゲット要素の幅を知らなければならない.知らない場合はjsを使用して動的に計算しなければならない.

垂直方向中央揃え

水平居中是我们在开发的过程中，遇见的非常非常常见的布局，下面 我就简单来说一说常见的方法

1. line-height
2. vertical-align
3. flex
4. table-cell
5. position 定位

line-height

此方法一般而言，是是用于文本垂直居中的，对行内元素，块级元素无效

flex

利用弹性布局flex，通过 align-items 设置弹性盒子元素在纵轴方向上的对齐方式

vertical-align vertical-alignこの属性は、行内の要素のベースラインが、その要素の行のベースラインに対して垂直に整列することを定義する

は、擬似要素とともに使用する必要がある(中央に位置するターゲット要素はinline-blockである必要があり、擬似要素の高さは100%である必要があることに注意)

.

はdisplay: table-cellと併用、主に親要素を設定するvertical-alignとtable-cell

である.

table-cell vertical-align参照
位置付け
下のコードを見ると、まず親要素にposition: relative行を追加し、次にターゲット要素の高さを知らなければならない.知らない場合はjsを使用して動的に計算しなければならない.