CSSで中央揃えを設定する方法

CSS で中央揃えを設定する方法: 1. "text-align:center" または "margin:vertical auto;" による水平方向の中央揃え; 2. "line-height" による垂直方向の中央揃え; 3. "Flexible" 「レイアウト」により、水平方向や垂直方向のセンタリングなどを実現します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css——中央揃え方法

• ##text-align:center — — 水平方向のセンタリング
  ##は、テキスト、画像、ボタンなどのインライン要素（表示がインラインまたはインラインブロックなどに設定されている）の水平方向のセンタリング##にのみ有効です。

#margin:vertical auto; ——水平方向のセンタリング

• 水平方向のセンタリングのみ、フローティング要素の配置には無効です

  .father{ width:500px; height:200px; background-color::#f98769; overflow:hidden;//不可缺少否则margin-top不生效 } .son{ width: 100px; height: 100px; margin:50px auto ; background-color: #ff0000; }

  ログイン後にコピー

line-height —— 垂直方向の中央揃え

• line-height=height、テキストの 1 行にのみ有効

テーブルを使用——水平方向と垂直方向の中央揃え

• td/th の align='center' 属性と valign='middle' 属性は、水平方向と垂直方向の中央揃えにできます

柔軟なレイアウト - 水平、垂直センタリング

• .father{display:flex;justity-content:center;align-items:center;}.father{display:flex;flex-direction:column;//改变主轴为cross axisjustity-content:center;}

  ログイン後にコピー

表示を使用: テーブルセル - 水平および垂直センタリング

• テーブル要素ではないものについては、display:table-cell を通じてテーブルのセルにシミュレートできます

  .father{ height:300px; background:#ccc; display:table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align:middle; /*IE8以上及Chrome、Firefox*/ text-align:center; } .son{ display:inline-block;//或是inline }

  ログイン後にコピー

奇妙なスキル - 子供は父親と同じである必要があります(子要素の幅と高さは既知です) —— 水平方向と垂直方向の中央揃え

• #

  .father{position:relative;}.son{//m、n为子盒子宽、高的一半position:absolute;left:50%;top:50%;margin-left:-mpx;margin-top:-npx;

  ログイン後にコピー
  
  

不明な子要素の幅と高さ—水平方向と垂直方向垂直方向のセンタリング

• .father { position:relative;}.son { position:absolute; top:50%; left:50%: transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/}

  ログイン後にコピー
  
  

疑似要素メソッド - 垂直方向のセンタリング

• .father{ position: relative; } .father::before{ content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .son{ display: inline-block; vertical-align: middle; }

  ログイン後にコピー
  
  詳細な HTML /css の知識がある場合は、css ビデオ チュートリアル
column をご覧ください。

以上がCSSで中央揃えを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。