<div style="width:600px;heigth:600px"><!--这个是父元素--> <div class="son"><!--这个是子元素--> <h1 class="title">hello word</h1> <div class="content">这里面是一堆元素</div> </div></div>知道父元素的宽度和height，直接通过css写的width和height， 子元素没有通过style设置width和height，而是通过子元素中内部的元素将其撑开来计算的。如何让这个子元素居中？测试过的失败的方法 margin-top:50%; margin-top:-50%; margin-top的百分数是根据父元素的width计算的。父元素 position:relative; 子元素position:absolute;top:0;right:0;bottom:0;left:0 失败，子元素如果不设置width和height就会直接继承到父元素的width和height，而不是通过内容撑开的宽度和高度。父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:absolute;top:-50%;top百分比里是根据父元素设定，子元素absolute，父元素继承不到高度。父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:relative;top:-50%;这个最接近正确的答案，但是还是是错误的，在chrome的盒子模型里面已经显示出了relative的偏移量，但是渲染的时候并没有被渲染出来，top-50%；无效果。最后一个方法我没试，但应该没问题，不过这样做的话容易出错，我这个网页上铁定是有视频的。因为子元素是被撑开的，所以在子元素的里面再加一层div，然后设置overflow:hidden; bfc。然后通过js获取到这个div的高度，给子元素设置偏移量。但这样可能会出问题，window.onload 的前提是网页上内容加载完毕，但是如果在有视频的情况下则会等到视频被加载完毕才会触发window.onload，因此不能用window.onload来实现，最多就是把js放到body标签结束地方的前面，但是可能会出现访问的时候类似于图片渲染（或者加载）速度慢的情况下，会导致获取到的js的值不正确。我想的是最好能使用纯css来实现这个子元素的垂直居中 大神 快出来啊
5 回答
慕用4288045
TA贡献4条经验 获得超2个赞
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html和CSS的关系</title>
<style type="text/css">
.father{
width:600px;
height:600px;
background:red;
display:table-cell;
vertical-align:middle;
}
.son{
text-align:center;
height:100px;
background:blue;
}
</style>
</head>
<div class="father"><!--这个是父元素-->
<div class="son"><!--这个是子元素-->
<h1 class="title">hello word</h1>
<div class="content">这里面是一堆元素</div>
</div>
</div>
</html>
红色为父元素，蓝色为子元素，蓝色必须设置了定高才能垂直居中，不知道是不是你想要的效果。
qq_奈奈奈_03699702
TA贡献19条经验 获得超5个赞
.parent{
line-height:600px;
text-align:center;
}
.child{
display:inline-block;
text-align:left;
line-height:normal;
vertical-align:middle;
}还有一种方式是绝对定位，用margin-left,margin-top负值调整。
也可以用justify-content:center;
align-items:center
- 5 回答
- 0 关注
- 1773 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消