垂直方向のセンタリングを実現する 3 行の CSS コード_html/css_WEB-ITnose

HTML 構造は次のとおりです:

<div id='div2'>	<div id='div1'></div></div>

CSS コードは次のとおりです:

#div2{	height:300px;width:300px;	border:1px red solid;	text-align:center;	margin:auto;}#div1{      height:50px;width:50px;      position: relative;      top: 50%;      transform: translateY(-50%);      border:1px red solid;      margin:auto;}

最もコアな CSS はこれらの 3 行です

      position: relative;      top: 50%;      transform: translateY(-50%);

ブラウザーの互換性を確保するには、transform 属性の前にブラウザーの接頭辞を追加する必要があります