<div id=vert-hoz> <h1>Content goes here</h1></div>
HTML 代码：
html,body{ height:100%; margin:0; padding:0;}body{ background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center; text-align:center; min-width:626px; min-height:400px;}#vert-hoz{ position:absolute; top:50%; left:50%; margin-top:-198px;/* half elements height*/ margin-left:-313px;/* half elements width*/ width:624px; height:394px; border:1px solid silver; background:#666; overflow:auto;/* allow content to scroll inside element */ text-align:left;}h1 {color:#fff;margin:0;padding:0}
CSS 代码：
现正在让咱们来看一下这种办法的代码以及它所带来的成绩：
时常做的第一件事一般是如何正在 CSS 中掌握元素程度或者许垂直位置上从中，置信这也是很多设想师喜爱做的事件。这是依照咱们最后提起的某种形式完成的，率先让元素正在水祥和垂直位置上分开 50% 的间隔，而后安装负的 margin 让它回到两头的地位。
译文形式：
自己英语还没过四级，因为没有能说是译者把，只能说是依照本人的了解去叙说了一遍笔者的意义，请诸位多多指教。
你能够正在 那里 看到这段代码的展现。
如你看到的这样，现正在的后果正如咱们设想的这样，那全体元素正在水祥和垂直的位置上圆满的处正在了两头的地位。当一集体将阅读器窗口变小，或者许运用一度低区分率的计算机时，那样从中的那全体元素的上部和左部将失踪，即便经过虎伏的滑行，也无奈看到。率先，咱们采纳相对于定位的办法让元素分开顶板和左部 50% 的间隔，而后咱们需求安装一度负的 margin 来将元素拉回到两头的地位。
旧的办法
当你发现你已经认为的现实实在并没有是这样，你会觉得很开心。
我为它安装了一度背景图片，仅仅是为了让它看上去更舒适一些，而咱们真正需求留意的全体是两头那全体灰色的海域。