Wie zentriere ich den Inhalt vertikal und horizontal, wenn ich eine modale Box schreibe?

Hallo zusammen, heute werden wir darüber sprechen, wie man den Inhalt beim Schreiben einer modalen Box vertikal und horizontal zentriert. Halten wir es zunächst einfach,

Dieses Problem entspricht tatsächlich der vertikalen und horizontalen Zentrierung eines Div. Es gibt 5 Lösungen.

Zuerst im ersten Fall, wenn wir die Breite und Höhe von div1 kennen:

　　<div id="div1"></div　　#div1{

<span style="font-size: 18px">    　　width: 200px;</span><br/><span style="font-size: 18px">    　　height: 100px;</span><br/><span style="font-size: 18px">    　　background: #54fa45;</span><br/><span style="font-size: 18px">    　　position: absolute;</span><br/><span style="font-size: 18px">    　　left:50%;</span><br/><span style="font-size: 18px">    　　top:50%;</span><br/><span style="font-size: 18px">    　　margin-left:-100px;  //设置div1的左边距为宽度的一半</span><br/><span style="font-size: 18px">    　　margin-top:-50px; //设置div1的上边距为高度的一半</span><br/><span style="font-size: 18px">　　}<br/>　　第二种情况下:不知道div1的宽高，就好比设置图片的垂直水平居中：<br/></span>

<span style="font-size: 18px">　　　　img{</span><br/><span style="font-size: 18px">    　　　　position: absolute;</span><br/><span style="font-size: 18px">    　　　　left: 0;</span><br/><span style="font-size: 18px">    　　　　top: 0;</span><br/><span style="font-size: 18px">    　　　　right: 0;</span><br/><span style="font-size: 18px">    　　　　bottom: 0;</span><br/><span style="font-size: 18px">    　　　　margin: auto;</span><br/><span style="font-size: 18px">　　　　　}</span>

<span style="font-size: 18px">　　　　这种情况其实很简单，给图片一个绝对定位，然后上下左右都为0，最后margin:auto;<br/>　　　　第三种情况：利用display：table<br/></span>

<span style="font-size: 18px">　　　　　　　　html,body{</span><br/><span style="font-size: 18px">    　　　　　　　　height: 100%;</span><br/><span style="font-size: 18px">    　　　　　　　　overflow:hidden;</span><br/><span style="font-size: 18px">　　　　　　　　}</span><br/><span style="font-size: 18px">　　　　　　　　#box{</span><br/><span style="font-size: 18px">    　　　　　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　height:100%;</span><br/><span style="font-size: 18px">   　　　　　　　　 background: #dbffd8;</span><br/><span style="font-size: 18px">    　　　　　　　　display:table;</span><br/><span style="font-size: 18px">　　　　　　　　}</span><br/><span style="font-size: 18px">　　　　　　　　#div1{</span><br/><span style="font-size: 18px">    　　　　　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　　　　　display:table-cell;</span><br/><span style="font-size: 18px">    　　　　　　　　text-align:center;</span><br/><span style="font-size: 18px">    　　　　　　　　vertical-align:middle;</span><br/><span style="font-size: 18px">　　　　　　　　}<br/>　　　第四种情况：利用display：</span><span style="font-size: 18px"><em style="line-height: 1.5">table-cell;<br/></em></span>

<span style="font-size: 18px">　　　　html,body{</span><br/><span style="font-size: 18px">    　　　　height: 100%;</span><br/><span style="font-size: 18px">    　　　　overflow:hidden;</span><br/><span style="font-size: 18px">　　　　}</span><br/><span style="font-size: 18px">　　　　#box{</span><br/><span style="font-size: 18px">    　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　background: #dbffd8;</span><br/><span style="font-size: 18px">    　　　　display:table;</span><br/><span style="font-size: 18px">　　　　}</span><br/><span style="font-size: 18px">　　　　#div1{</span><br/><span style="font-size: 18px">    　　　　height:100%;</span><br/><span style="font-size: 18px">    　　　　width:100%;</span><br/><span style="font-size: 18px">    　　　<span style="color: #ccffff">　<span style="color: #000000">display:table-cell;</span></span></span><br/><span style="font-size: 18px; color: #000000">    　　　　text-align:center;</span><br/><span style="font-size: 18px; color: #000000">   　　　　 vertical-align:middle;</span><br/><span style="font-size: 18px">　　　　　　}<br/>　　最后一种就是利用盒子的怪异盒模型了<br/></span>

<span style="font-size: 18px">　　　　<div id="box"><br><span style="font-size: 18px">    　　　　<img src="img/map-pin.png" alt=""></span><br><span style="font-size: 18px">　　　　</div><br></span>

<span style="font-size: 18px">　　　　　　html,body{</span><br><span style="font-size: 18px">    　　　　　　height: 100%;</span><br><span style="font-size: 18px">    　　　　　　overflow:hidden;</span><br><span style="font-size: 18px">　　　　　　　}</span><br><span style="font-size: 18px">　　　　　#box{</span><br><span style="font-size: 18px">    　　　　　　width:100%;</span><br><span style="font-size: 18px">    　　　　　　height:100%;</span><br><span style="font-size: 18px">    　　　　　　display:-webkit-box;</span><br><span style="font-size: 18px">    　　　　　　-webkit-box-align:center;</span><br><span style="font-size: 18px">    　　　　　　-webkit-box-pack:center;</span><br><span style="font-size: 18px">　　　　　　}<br>这就是我对元素水平居中的理解，你们学会了吗？</span>

 <br>

Das obige ist der detaillierte Inhalt vonWie zentriere ich den Inhalt vertikal und horizontal, wenn ich eine modale Box schreibe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!