css文字またはdivボックスの水平垂直中央を実現する方法

水平垂直方向の中央揃えを実現する方法
テキスト(テキスト)の内容は行内要素に属します
行の要素を水平に垂直に中央に配置する方法
方法1:
テキストの外枠を設定するボックス

text-align:center /*    */  
height = 100px;  /*      */
line-height = 100px;    

垂直方向の中央に行の高さと箱の高さが一致することを保証すれば、コードは以下の通りです.

	
	



	hello

方法2:セルに変換
文字のある箱displayをtable-cellに設置する

text-align:center       
display:table-cell;       
vertical-align:middle;    

注意:vertical-alignの属性コードは、セル要素のみが次のとおりです.

	
	



	hello


	
123

ブロックレベル要素の水平方向中央揃え方法margin:0 auto;は水平方向の中央にのみ設定できますが、margin:auto 0は垂直方向の中央に設定できません.marginは垂直方向の陥没の問題があるためです.
方法一:位置決め+margin
親エレメント設定position:relative;子エレメント設定

width: 100px;  
height: 100px;  
position:absolute;  
top:50%;  
left:50%;  
margin-top:-50px;  
margin-right:-50px;  

margin-leftが高さの半分、margin-rightが幅の半分であれば、次のようにコードできます.

方式二:位置決め方法
親エレメント設定position:relative;子エレメント設定

position:absolute;  
top:0;  
bottom:0;  
left:0;  
right:0;  
margin:auto;  

このように設定すると、ブラウザは自動的に上下の外縁を同じにし、左右の外縁を同じにし、垂直に中央に位置する効果コードは以下の通りです.

方式三：单元格方法

利用单元格法
父级元素

display:table-cell;  
text-align:center;  
vertical-align:middle;   

サブエレメントdisplay:inline-tableは、text-alignが行内エレメントと行内ブロックに対してのみ有効なコードが次のようになるためである.

	
	



		

			   
		
	

	
	

		

        123