div在另一个div里垂直居中的示例介绍

<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>

<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>

<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>

<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>