html:
这里设置父类为father;子类为son;css
<div class="father"> <div class="son"> </div>
js:html
1. 方法一(使用绝对布局): .father{ width:500px; height:500px; position:relative; background-color:red; } .son{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background-color:black; } 2. 方法二(使用table-cell形式) .father{ width:500px; height:500px; display:table-cell; text-align:center; vertical-align:middle; background-color:red; } .son{ width:200px; height:200px; display:inline-block; ps:这句话必定要加,否则没效果哦 background-color:black; } 3.方法三(使用弹性布局flex) .father{ width:500px; height:500px; display:flex; justify-content:center; //内容水平居中 align-items:center; //内容垂直居中 background-color:red; } .son{ width:200px; height:200px; background-color:black; } 4.方法四(使用绝对布局) .father{ width:500px; height:500px; display:relative; background-color:red; } .son{ width:200px; height:200px; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background-color:black; }