如何在这四个div内容中水平和垂直居中？

Question

我正在尝试在4个div中水平和垂直居中放置内容。 如果我将内容水平居中，那么垂直居中就消失了。 如果我将内容垂直居中，那么水平居中就消失了。

这是FIDDLE

DIV，part1在垂直方向居中，part2，part3和part4在水平居中。

我希望所有4个div内容都垂直和水平居中。 我怎样才能做到这一点？

也赞赏一些丰富多彩的风格建议。

Answer 1

.goals应用了一种样式，但是.skills，.rrhelp和.cur_possi没有应用。 您还需要position:relative对于.part1，.part2，.part3，.part4的位置。 为了使文本正确居中，由于将.goals，.skills，.rrhelp和.cur_possi div设置为position: absolute ，请添加left: 0; right: 0; left: 0; right: 0;

更新的提琴： http : //jsfiddle.net/21s5u8ys/4/

Answer 2

您可以以像素为单位指定固定高度并overflow:hidden;

我有更新提琴，可能对您有帮助： http : //jsfiddle.net/21s5u8ys/3/