我试图垂直居中一个引导容器中的div,由于另一个列内容可以调整大小.我想在没有flexbox的情况下执行此操作以实现向后兼容性.
我正在尝试translateY()技巧,但父行的高度为0,因此它将自身居中放在行的顶部而不是中间.
我已经读过浮动的物品占据了他们孩子的高度,所以我试着漂浮它们,但它仍然没有达到高度.
如何使此行达到100%,以便垂直居中正常工作?
.container{
margin-top: 60px;
}
.outer, .container{
border: 1px solid #000;
}
.row-center{
position: relative;
/* This needs to be 100% height but I can't figure it out */
/* I added the floats but it didn't help */
height: 100%;
float: left;
}
.outer{
position: absolute;
float: left;
top: 50%;
transform: translateY(-50%);
}
some text
some text
(示例代码假定引用了引导程序css)