CSS - 中心对齐不起作用答案

【问题标题】：css - center alignment not workingCSS - 中心对齐不起作用
【发布时间】：2011-12-20 04:13:50
【问题描述】：

我正在尝试使用this jsfiddle 使div 水平和垂直居中，保持浏览器宽度和高度的100%，其中文本应垂直和水平居中对齐，但目前是顶行的文本与中心对齐，而不是使整体中心点位于 3 行文本的中心。

有人知道怎么做吗？

我的 HTML：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Regret</title>
        <meta charset="utf-8">
        <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'>
        <link href='css/regret.css' rel="stylesheet">
    </head>

    <body>
        <div id="container">
            <div class="inner">
                <h1>Regret</h1>
                <p class="choice">Let it out</p>
                <p class="choice">Wallow in it</p>
            </div>
        </div>
    </body>
</html>

我的 CSS：

body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; }
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; }
img { border: 0; }

#container { margin: 0 auto; }
.choice { font-family: 'Bowlby One SC', cursive; }
.inner {  position: absolute; top: 50%; }

【问题讨论】：

标签： html css

【解决方案1】：

这个小提琴应该可以工作（如果我理解你想要的正确的话）：http://jsfiddle.net/7ZSmX/23/。我基本上使用display: table 和display: table-cell 属性。

【讨论】：

是的，但我不想为表格指定高度（除非该高度是浏览器的 100%）
@mheavers。我刚刚更改了它（请参阅答案中的小提琴）。现在检查一下。它是 100% 的浏览器。
不错的一个！疯狂地，您必须做多少工作才能使某些东西居中对齐

【解决方案2】：

把内部改成这个

position:fixed; top: 50%; text-align:center; width:100%;

【讨论】：

见 @John Riselvato 的 cmets

【解决方案3】：

这里是修复： http://jsfiddle.net/7ZSmX/13/

.inner {  margin-top: 50%; }

是你想要的，而不是相对的。

【讨论】：

我给文本一个字体大小后似乎不起作用：jsfiddle.net/heaversm/7ZSmX/15
jsfiddle.net/7ZSmX/19 你的字体有问题。将所有内容保存在 .inner 中
什么不完全有效？看看这个：jsfiddle.net/7ZSmX/24 效果很好。
上面的例子是让容器比它需要的大得多。前面的示例是将文本的顶部与浏览器的中心对齐，而不是文本的中心。