cssにおけるブロックレベル要素の水平垂直中心問題

親要素に絶対位置決めpositionを追加:absolute;サブエレメントに絶対位置決めpositionを追加する:absolute;サブエレメント設定left right top bottomはすべて0 pxサブエレメント設定margin:autoに設定します.ここで注意しなければならないのはmargin:auto;これにより、垂直水平方向の中央

を実現することができる.

//               
    <div class="outer">
		<div class="inner"></div>
	</div>
//          css           
	.outer{
    		width: 200px;
    		height: 200px;
    		background-color:pink;
    		position: absolute;
    		
    	}
    	.inner{
    		width: 100px;
    		height: 100px;
    		background-color: black;
    		position: absolute;
    		top: 0;
    		left: 0;
    		bottom: 0;
    		right: 0px;
    		margin: auto;
    	}

親要素に相対位置決めposition:relativeを追加する.サブエレメントに絶対位置決めpositionを追加する:absolute;絶対位置決めを追加するとドキュメントフローから離れているため、サブエレメントのデフォルトhtmlは親エレメントです.移動時にhtmlを参照するには、親要素に相対的な位置を追加する必要があります.親要素を現在の要素に設定する参照要素は、子要素にmargin-top:clac(50%-子要素の高さの半分)margin-left:clac(50%-子要素の幅の半分)を追加します.この2つの属性は、子要素を親要素の水平中央位置に移動するためである.移動する点が参照子要素の左上隅であるため、子要素の幅の半分を減算するという2つの言葉は、transform:translate(x,y)のような他の属性に取って代わることもできる.x yは水平方向と垂直方向の移動距離であり、

を自分で発揮することができる.

//             
     <div class="outer">
		<div class="inner"></div>
	 </div>
//  css    inner outer        
	 .outer02{
    		width:200px;
    		height: 200px;
    		background-color:teal;
    		position: relative; 

        }
        .inner02{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
        } 

3)伸縮ボックス/フレキシブルボックスレイアウト親要素にdisplayを設定する:flex;justify-content: space-around; align-items: center; これにより、親要素の中でサブ要素が水平に垂直に中央に位置することもできます.

//                   
    <div class="outer">
		<div class="inner"></div>
	</div>
//  css  
   .outer{
        	width: 200px;
        	height: 200px;
        	background-color: black;
        	display: flex;
        	justify-content: space-around;
        	align-items: center;
        }
        .inner{
        	width: 100px;
        	height: 100px;
        	background-color: pink;
        }

ウェブページをレイアウトするときに水平垂直に中央に位置することは比較的重要な問題であり、ユーザーの観点から見ると、対称的なものはより快適に見え、ウェブページも例外ではなく、水平垂直に中央に位置するだけでなく、異なる解像度でのウェブページの互換性をより完璧に保証し、極端な調整方法は短時間で比較的速いが、火が通らない.