CSSで垂直方向の中央揃えを行う方法は何ですか

方法: 1. "display:table-cell;vertical-align:middle;" スタイルを使用します。 2. フレックス レイアウトを使用します。 3. 絶対配置と負のマージンを使用します。 4. 絶対配置と変換を使用します。属性; 5. 絶対位置と上や左などの属性を使用します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

垂直方向のセンタリングは、レイアウトにおける非常に一般的な効果の 1 つです。良好な互換性を実現するために、PC 側で垂直方向のセンタリングを実現する方法は、一般に、絶対位置決め、テーブルセル、ネガティブマージンなどの方法を使用します。 。 CSS3 では、モバイル端末の垂直方向のセンタリングがより多様になります。

#方法 1: テーブルセル

html 構造:

<div class="box box1">
        <span>垂直居中</span>
</div>

css:

.box1{
	display: table-cell;
	vertical-align: middle;
	text-align: center;			
}

方法 2: display:flex

.box2{
	display: flex;
	justify-content:center;
	align-items:Center;
}

方法 3: 絶対位置と負のマージン

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

方法 4: 絶対配置と 0

.box4 span{
  width: 50%;  
  height: 50%;  
  background: #000;
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;  
}

この方法は上記と似ていますが、ここでは、margin:auto と上、左、右、下を 0 に設定することで中央揃えを実現します。すごい。ただし、ここでは内部要素の高さを決定する必要があり、モバイル端末に適したパーセンテージを使用できます。

方法 5: 翻訳

.box6 span{
			position: absolute;
			top:50%;
			left:50%;
			width:100%;
			transform:translate(-50%,-50%);
			text-align: center;
		}

これは実際には方法 3 の変換であり、移行は翻訳によって実現されます。

方法 6: display:inline-block

.box7{
  text-align:center; 
  font-size:0;
}
.box7 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

この方法は非常に賢いです...スペースを占有するために: after を使用します。

(学習ビデオ共有:

css ビデオ チュートリアル)

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