方法1:
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }
方法2:(不太好使)
.parent { width:800px; height:500px; border:2px solid #000; display:table-cell; vertical-align:middle; text-align: center; } .child { width:200px; height:200px; display:block; background-color: red; }
方法3:
.parent { width:800px; height:500px; border:2px solid #000; display:flex; justify-content:center; align-items:center; } .child { width:200px; height:200px; background-color: red; }
方法4:
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:300px; height:200px; position:absolute;/*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/ left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%); //类似于 margin-left: -150px; margin-top:-100px;
background-color: red;
}
本文对原文稍微有修改,记录下来便于查找。