網(wǎng)頁布局 CSS簡(jiǎn)單實(shí)現(xiàn)垂直居中
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:25:41 作者：佚名 
我要評(píng)論
我要評(píng)論英文原文：
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
中文譯文：
http://www.12sui.cn/blog/71.html
本人英語還沒過四級(jí)，所以不能說是翻譯把，只能說是按照自己的理解去敘述了一遍作者的意思，請(qǐng)各位多多指教。
譯文內(nèi)容：
改進(jìn)的方法
針對(duì)這些問題的另一個(gè)類似的版本是讓元素依然保持垂直方向上的定位方式，但是水平方向上設(shè)置 margin 為 auto 以達(dá)到我們的目的。這樣子消除了文字在水平方向上的問題。請(qǐng)看改進(jìn)的代碼。
CSS 代碼：
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;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
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}
HTML 代碼：
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
你可以在 這里 看到實(shí)際的頁面效果。
這樣子達(dá)到了我們預(yù)期的一部分效果，但是在垂直方向上依然存在著問題，你可以在下圖中看到：
相關(guān)文章
CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-03- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-08-09
css實(shí)現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實(shí)現(xiàn)元素垂直居中的常用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-01- 作為前端攻城師，在制作Web頁面時(shí)都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于2017-09-12
css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來2017-04-23- 對(duì)于頁面上的塊級(jí)元素，只須定寬及設(shè)置margin:auto 0;即可在垂直上居中，但對(duì)于浮動(dòng)的元素垂直居中是無效的。那么我們?nèi)绾蝸硖幚磉@個(gè)問題呢，今天我們來探討下。2014-09-12
css3設(shè)置box-pack和box-align讓div里面的元素垂直居中
只要設(shè)置元素的box-pack和box-align即可，這兩個(gè)屬性當(dāng)前只有webkit和moz支持，要設(shè)置垂直居中的話只需要將這兩個(gè)屬性的值都設(shè)置為center即可，需要的朋友可以參考下2014-09-01html元素水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法,需要的朋友可以參考下2014-04-08
這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-09-04