別の div 内で div を垂直方向に中央揃えにする例

基礎知識: div を別の div 内で垂直方向に中央揃えにする

方法 1:

<span style="text-decoration: none;">.parent {<br>            width:800px;<br>            height:500px;<br>            border:2px solid #000;<br>            position:relative;<br> }<br> .child {<br>             width:200px;<br>             height:200px;<br>             margin: auto;  <br>             position: absolute;  <br>             top: 0; left: 0; bottom: 0; right: 0; <br>             background-color: red;<br>}<br></span>

方法 2:

<span style="text-decoration: none;">.parent {<br>             width:800px;<br>             height:500px;<br>             border:2px solid #000;<br>             display:table-cell;<br>             vertical-align:middle;<br>             text-align: center;<br>         }<br>  .child {<br>             width:200px;<br>             height:200px;<br>             display:inline-block;<br>             background-color: red;<br>         }<br></span>

方法 3:

<span style="text-decoration: none;">.parent {<br>            width:800px;<br>            height:500px;<br>            border:2px solid #000;<br>            display:flex;<br>            justify-content:center;<br>           align-items:center;<br>        }<br> .child {<br>            width:200px;<br>            height:200px;<br>            background-color: red;<br>        }<br></span>

方法 4:

りー

別の div 内で div を垂直方向に中央揃えにするその他の例については、PHP 中国語 Web サイトの関連記事に注目してください。