html – 在另一个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中间的一个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答案,或类似的答案.

解决方法 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中的更多详细信息.

总结

以上是内存溢出为你收集整理的html – 在另一个div内垂直居中一个div全部内容，希望文章能够帮你解决html – 在另一个div内垂直居中一个div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。