元素垂直居中？

wi***

hello word

这里面是一堆元素

知道父元素的宽度和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来实现这个子元素的垂直居中大神快出来啊

88***

给父元素加css样式

display:flex;
align-items:center;
就可以实现垂直居中。

望采纳

di***

Html和CSS的关系

  .father{
width:600px;
height:600px;
background:red;
display:table-cell;
vertical-align:middle;
  }

  .son{
text-align:center;
height:100px;
background:blue;

  }







hello word

这里面是一堆元素




红色为父元素，蓝色为子元素，蓝色必须设置了定高才能垂直居中，不知道是不是你想要的效果。

任***

.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

m4685***

line-height

已有账号？

找人解决需求

元素垂直居中？

全部参与4

热门问答

wi***

今日需求悬赏

今日问答求助

发布任务需求已有1031289位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端