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

【问题标题】：How can I horizontally and vertically center this four divs contents?如何将这四个 div 内容水平和垂直居中？
【发布时间】：2015-10-10 10:34:28
【问题描述】：

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

这里是FIDDLE

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

我希望所有 4 个 div 内容都垂直和水平居中。我该怎么做？

还有一些色彩丰富的风格建议值得赞赏。

【问题讨论】：

part1到底有什么问题？
Part1 不是水平对齐的。您可以看到，当您调整窗口大小时..实际上与其他人一样对齐..但它没有按预期工作，,..
我看不出有什么问题。可能是特定于浏览器的。尝试添加浏览器的屏幕截图和详细信息。
i62.tinypic.com/20f51dy.jpg我用的是火狐

标签： javascript jquery css alignment

【解决方案1】：

.goals 应用了样式，但 .skills、.rrhelp 和 .cur_possi 没有。您还需要在 .part1、.part2、.part3、.part4 上使用 position:relative。为了使文本正确居中，因为您将 .goals、.skills、.rrhelp 和 .cur_possi div 设置为 position: absolute，添加 left: 0; right: 0;

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

【讨论】：

【解决方案2】：

您可以以像素为单位给出固定高度，overflow:hidden;

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

【讨论】：

这不是垂直对齐的