方法三种，可以根据实际需求选择。
方法一
<body>
<div id="box">
<div id="content">山夫不解数甲子，一叶落知天下秋。</div>
</div>
</body>
html,body{
width:100%;
height:100%;
}
#box { width:100%; height:100%;position:relative;}
#content { width:50%; height:50%;position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
方法二
<body>
<div id="box">
<div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
</div>
</body>
html,body{
width:100%;
height:100%;
}
#box { width:100%; height:100%;position:relative;}
#content { position:absolute;left:50%; top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
方法三
<body>
<div id="box">
<div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
</div>
</body>
html,body{
width:100%;
height:100%;
}
#box { display:flex; display:-webkit-flex; justify-content:center; align-items:center;}//新属性 考虑兼容性问题