Heim >Web-Frontend >CSS-Tutorial >Beispiel für die vertikale Zentrierung eines Div innerhalb eines anderen Div
Methode 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>
Methode 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>
Methode 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>
Methode 4:
<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:300px;<br> height:200px;<br> margin:auto;<br> position:absolute;/*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/<br> left:50%;<br> top:50%;<br> margin-left: -150px;<br> margin-top:-100px;<br> background-color: red;<br> }<br></span>
Weitere Beispiele für die vertikale Zentrierung eines Div innerhalb eines anderen Div finden Sie auf der chinesischen PHP-Website für verwandte Artikel!