为什么css中的top:50%不起作用？
为什么css中的top:50%不起作用？
提问于 2012-03-19 13:25:07
我正在做一个网站，我试着垂直居中：
position: absolute;
width:1200px;
height:600px;
top: 50%;
left: 50%;
margin-left: -600px;我的超文本标记语言是一个单一的div
回答 7
Stack Overflow用户
发布于 2015-03-24 20:19:00
使用所需的位置静态高度
i{
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
}<i>center</i>
编辑:使用Flex (2021-10-19)
i {
display: flex;
align-items: center; /* vertical centering if flex-direction: row */
justify-content: center; /* horizontal centering if flex-direction: row */
/* extra styles */
background-color: limeGreen;
min-height: 160px;
}<i>center</i>
enter code hereStack Overflow用户
发布于 2016-09-11 06:02:53
要回答为什么top: 50%不工作的问题，当您在元素上使用属性top时，该元素的父级需要在适当的位置设置静态高度。此值应为px或百分比以外的单位。如果您真的需要在父对象中使用百分比，那么可以继续使用下一个父对象(即该父对象的父对象)，并使该父对象具有固定的静态高度。
使任何东西垂直居中。I prefer to use this method
使用CSS transform，因为你不需要知道你的元素有多宽。
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);不要忘记添加浏览器/供应商前缀。
You can refer here for vendor prefixes.
如果你不知道你父母的身高。您有两个选择：
使用JavaScript的
- 获取父元素的自然高度，然后将该父元素的height属性设置为您刚刚获取的值。如果父元素的高度是由与要居中的元素同级的另一个子元素引起的，则可以使用此方法。
$('.parent').height( $(this).height() );.parent {
/* Unkown height */
}
.child {
/* Create columns */
width: 50%;
float: left;
}
.child-1 {
position: relative;
top: 50%;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Example Start -->
<div class="parent">
<div class="child child-1">
Lorem ipsum
</div>
<div class="child child-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
提示:如果你考虑到响应性，只需在浏览器调整大小时在JavaScript中再次设置高度即可。您可以通过在JavaScript中将height设置为auto来获得新的自然高度，然后再次执行此过程。
- 你可以划掉上面的想法，改为使用
display: table居中。CSS-Tricks has a very good example here.
Stack Overflow用户
发布于 2012-03-19 13:31:39
CSS属性top的工作方式与left完全相同。它从那个方向推送div。当您编写top:50%时，div将从顶部向下推50%。你想让它垂直居中，所以你需要通过把它拉回来来解决这个问题。这可以使用margin-top: -300px来完成，就像您使用margin-left: -600px向左拉它一样。
position: absolute;
width: 1200px;
height: 600px;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -600px;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9765402
复制相关文章
相似问题
腾讯云开发者
