Question

我有这段代码：

<html>
  <head>
    <script>
    function newWord() {
      var request = new XMLHttpRequest();
      request.onload = function() {
          // get the file contents
          var fileContent = this.responseText;
          // split into lines
          var fileContentLines = fileContent.split( '\n' );
          // get a random index (line number)
          var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
          // extract the value
          var randomLine = fileContentLines[ randomLineIndex ];

          // add the random line in a div
          document.getElementsByName( 'random-phrase' )[0].innerHTML = randomLine;
      };
      request.open( 'GET', 'dictionary.txt', true );
      request.send();
    }
    function define() {
      var word = document.getElementsByName ( 'random-phrase' )[0].innerHTML;
      window.open("http://dictionary.reference.com/browse/" + word)
    }
    </script>
    <title>word-a-day web</title>
  </head>
  <body>
    <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 50px;" name="random-phrase">Loading a word...</h1>
    <button onclick="newWord()">New Word</button>
    <button onclick="define()">Define</button>
    <script>newWord()</script>
  </body>
</html>

我想把所有内容放在页面的中间位置。我很想知道如何将所有按钮和文本以及所有内容集中在一起。 提前致谢！

Answer 1

首先将它们包装在div中，例如。调用#toCenter并应用以下css：

#toCenter{
  position: fixed; /*or absolute*/
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

此方法仅适用于IE9及其他方法。

Answer 2

要支持IE8，您也可以使用display:table;。

HTML将是：

<body>    
<div id="tablecont">
    <div id="rowcont">
        <div id="cellcont">
            <div class="container">
                words<br/>
                other words<br/>
                heaps of words
            </div>
        </div>
    </div>
</div>
</body>

CSS：

body,html {
    height:100%;
}
#tablecont {
    display:table;
    height:100%;
    width:100%;
}
#rowcont {
    display:table-row;
}
#cellcont {
    display:table-cell;
    vertical-align:middle;
}
.container {
    max-width:50%;
    margin:0 auto;
    text-align:center;
}

这方面的一个小问题是：http://jsfiddle.net/ryanpither/nme67079/

请注意height:100%;上的body,html声明。这样表就可以扩展到页面的整个高度。

与position:fixed;或position:absolute;解决方案相比，此解决方案还会将文档中的内容保留为“流程”。

支持显示：表格; ：http://caniuse.com/#feat=css-table

支持2D转换：http://caniuse.com/#feat=transforms2d

轻松地将<div>中的任何内容居中到页面的正中</div>

2 个答案: