Question

我到处寻找在窗口中居中文本，我相信我找到了最好的解决方案（我相信......我还有其他的建议）。但是，无论窗口有多大或多小，我都会在两侧看到这些恼人的滚动条。

你们可以看看这个代码/小提琴，让我知道为什么滚动条在那里以及如何删除它们？

<!DOCTYPE html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet'       type='text/css'>
  <style>
    body {
        font-family: 'Asset', cursive;
        font-size: 100px;
        text-shadow: 4px 4px 4px #aaa;

        width: 100%;
        height: 100%;
    }

    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

  </style>
  </head>
  <body>
    <div>
    <h1>HELLO</h1>
    </div>
  </body>
</html>

http://jsfiddle.net/rYe7V/

Answer 1

小提琴：http://jsfiddle.net/rYe7V/1/

只需添加到body：

margin: 0;

Answer 2

你可以删除这样的滚动条。 http://jsfiddle.net/rYe7V/2/

body
{
overflow: hidden;
}

CSS / HTML：窗口中的中心文本没有滚动条

2 个答案: