CSS在固定和高div中的垂直中心的详细解决方案

需求情况

情况是这样的,外层的div,宽度是固定的,但内容是不固定的。很多朋友的做法是添加填料或边缘的头部,使其内容似乎是中心,但如果内容变化,固定填料或头部的边缘保持不变。它使垂直方向不在中间!

我们知道,如果以下div

CSS代码将内容复制到剪贴板。


haorooms内部内容




风格是这样的

CSS代码将内容复制到剪贴板。


。外{文本对齐:中心;垂直对齐:中部;宽度:200px;身高:350px;}




垂直对齐:中间无论是什么用途,很多朋友就在里面。做文章,我上面说,加上保证金等等!那么,有没有更好的解决办法呢

解决方法

理念:添加一个csshack,设置csshack线高度等于外层的div的高度,可以使用垂直对齐:中!

div如下:

CSS代码将内容复制到剪贴板。



haorooms内部内容csshack





样式如下:

CSS代码将内容复制到剪贴板。


{ *
保证金:0;
填充:0;
}
{。外
背景颜色:# CCC;
字体大小:24px;
身高:350px;
文本对齐:中心;
溢出:隐藏;
宽度:280px;
}
outer.inner,
v {。外。
显示:内联块;
变焦:1;*显示:内联; / * * /触发inline-block IE67支持
}
outer.inner {。
线高度:1.8;
填充物:0 4px 0 5px;
垂直对齐:中间;
宽度:262px;
}
外部,{ {
行高:350px;
文本缩进:- 9999px;
宽度:1px;
}




这实现了div中的垂直中心!