垂直居中另一个div内的div

我正在尝试vertical-align: middle另一个div内的div，但由于某种原因，它无法正常工作。我究竟做错了什么？垂直居中另一个div内的div

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'block'> I'm Block </div> 
 
<div>

PS：这仅仅是一个例子，所以没有，我真的不知道的div的实际宽度和高度，因为它们是动态的，根据其内容，所以请不要使用margin-top：125px或padding-top：125px的答案，或者类似的答案。

来源

2016-02-14 jessica

的vertical-align属性仅适用于行内和表小区元件（source）。在你的代码中，你正在使用块级元素。

试试这个Flexbox的选择：

#wrapper { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex;    /* establish flex container */ 
 
    align-items: center;   /* vertically center flex items */ 
 
} 
 

 
#block { 
 
    border: 1px solid blue; 
 
    width: 500px; 
 
    height: 250px; 
 
    /* vertical-align: middle; */ 
 
}

<div id='wrapper'> 
 
    <div id='block'> I'm Block </div> 
 
<div>

了解更多关于Flex对准这里：Methods for Aligning Flex Items

浏览器支持：Flexbox将被所有主流浏览器的支持， except IE < 10。一些最近的浏览器版本，如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情，请点击this answer。

来源

2016-02-14 04:59:38

伟大的解决方案，谢谢。 – Juanra

是的，这是工作谢谢你。 – Udara

这是我通常如何做到这一点。

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
position: relative; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
position: absolute; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
}

<div id="wrapper"> 
 
<div id="block"></div> 
 
</div>

简单的方法，使之动态。

来源

2016-02-14 04:56:10 magreenberg

你可以这样做：

#block { 
border: 1px solid blue; 
margin:25% 0; 
width: 500px; 
height: 250px; 
vertical-align: middle;}

但是，这不是你要找的！

或这样的：

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
display:table-cell; 
vertical-align: middle; 
} 
#block { 
border: 1px solid blue; 
display:inline-block; 
width: 500px; 
height: 250px; 
}

来源

2016-02-14 04:59:22

你可以这样来做：

#wrapper { 
    border: 1px solid red; 
    width: 500px; 
    height: 500px; 
} 
#block { 
    border: 1px solid blue; 
    width: 500px; 
    height: 250px; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

这里实时查看：https://jsfiddle.net/w9bpy1t4/

来源

2016-02-14 05:00:11 melalonso

如果你知道内div的高度，然后ü可以在包装和位置的绝对使用相对位置内部div有一些余量。所以CSS可以是这个

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
position: relative; 
} 
#block { 
border: 1px solid blue; 
width: 500px; 
height: 250px; 
vertical-align: middle; 
position: absolute; 
margin-top: 50%; 
top: -125px; 
}

来源

2016-02-14 05:07:27

垂直居中另一个div内的div

回答

相关问题