<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
/*1.父元素加相对定位,子元素且对定位*/
#parent{
width: 500px;
height: 500px;
background-color: #f00;
/*父元素加相对定位*/
position:relative;
}
#child{
width: 200px;
height: 200px;
background-color: #0f0;
/*子元素加绝对定位,向下左右0*/
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
/*2.父元素加display: table-cell;vertical-align: middle;text-align: center; 子元素加:display: inline-block;*/
/*3.如果知道子元素宽高,父元素加:position: relative;子元素加: position: absolute; top:50%;left:50%;margin-top:-100px;margin-left:-100px;*/
</style>
</head>
<body>
<divid="parent">
<divid="child"></div>
</div>
</body>
</html>
1045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
