css 水平居中，垂直居中，自適應(yīng)寬度的代碼
發(fā)布時(shí)間：2012-06-14 13:09:40 作者：佚名 
我要評(píng)論
我要評(píng)論寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來(lái)變化
一、寬度自適應(yīng)的元素水平居中：
1.寬度自適應(yīng)的元素可以是：絕對(duì)位定、浮動(dòng)元素、行內(nèi)元素。而我們通常布局，肯定不會(huì)用行內(nèi)元素，所以會(huì)選擇，絕對(duì)定位或浮動(dòng)。
2.居中：這里我們應(yīng)該會(huì)想到1/2、50%、一半等這些東西?！ ?
上圖中：黑色為body，深綠色需要在body中水平居中，并且寬度是自適應(yīng)的。亮綠色，是一個(gè)多余的DIV，就是為了讓深綠色的DIV水平居中。
以下是實(shí)現(xiàn)代碼：
pos元素的float:left或都用position:absolute;都可以，因?yàn)檫@兩個(gè)屬可以寬度自適應(yīng)。
先這個(gè)多余的DIV亮綠色，水平50%移動(dòng)(移動(dòng)，可以用margin-left 或者 left)
再讓其內(nèi)容深綠色向右水平移動(dòng)50%（只能用right屬性移動(dòng)）;
那么這個(gè)深綠色，就會(huì)在黑色的body里居中了！
<body>
<div class="pos">
<div class="boxA">測(cè)試用的內(nèi)內(nèi)容測(cè)測(cè)試用的內(nèi)容</div>
</div>
</body>
*{ margin:0; padding:0;}
body{background:#000000;}
.pos{float:left;margin-left:50%; background:#33CC33; padding:10px;}
.boxA{position:relative;right:50%;background:#096;}
總結(jié)：外層的定位：需要是自適應(yīng)寬度的;(float:left 或者 position:absolute;)
內(nèi)層的位定：需要是自動(dòng)100%寬度的（相對(duì)于外層100%）;
并且是可以移動(dòng)出外層范圍的;
（所以只能用position:relative;別無(wú)選擇?。?
1.寬度自適應(yīng)的元素可以是：絕對(duì)位定、浮動(dòng)元素、行內(nèi)元素。而我們通常布局，肯定不會(huì)用行內(nèi)元素，所以會(huì)選擇，絕對(duì)定位或浮動(dòng)。
2.居中：這里我們應(yīng)該會(huì)想到1/2、50%、一半等這些東西?！ ?
上圖中：黑色為body，深綠色需要在body中水平居中，并且寬度是自適應(yīng)的。亮綠色，是一個(gè)多余的DIV，就是為了讓深綠色的DIV水平居中。
以下是實(shí)現(xiàn)代碼：
pos元素的float:left或都用position:absolute;都可以，因?yàn)檫@兩個(gè)屬可以寬度自適應(yīng)。
先這個(gè)多余的DIV亮綠色，水平50%移動(dòng)(移動(dòng)，可以用margin-left 或者 left)
再讓其內(nèi)容深綠色向右水平移動(dòng)50%（只能用right屬性移動(dòng)）;
那么這個(gè)深綠色，就會(huì)在黑色的body里居中了！
復(fù)制代碼
代碼如下:<body>
<div class="pos">
<div class="boxA">測(cè)試用的內(nèi)內(nèi)容測(cè)測(cè)試用的內(nèi)容</div>
</div>
</body>
*{ margin:0; padding:0;}
body{background:#000000;}
.pos{float:left;margin-left:50%; background:#33CC33; padding:10px;}
.boxA{position:relative;right:50%;background:#096;}
總結(jié)：外層的定位：需要是自適應(yīng)寬度的;(float:left 或者 position:absolute;)
內(nèi)層的位定：需要是自動(dòng)100%寬度的（相對(duì)于外層100%）;
并且是可以移動(dòng)出外層范圍的;
（所以只能用position:relative;別無(wú)選擇?。?
相關(guān)文章
css實(shí)現(xiàn)元素水平垂直居中常見(jiàn)的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來(lái)2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見(jiàn)的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁(yè)腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-27html元素水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法,需要的朋友可以參考下2014-04-08- 水平垂直居中在css中的應(yīng)用想必大家已經(jīng)很熟悉。盡管如此，在本文也要為大家介紹兩種不錯(cuò)的實(shí)現(xiàn)方法，如果你想鞏固一下，那還是值得一看的2013-09-16
- 在制作Web頁(yè)面時(shí)都有碰到CSS制作水平垂直居中，我想大家都有研究過(guò)或者寫(xiě)過(guò)，平時(shí)工作收集了幾種不同的方式制作垂直居中方法，但每種方法各有千秋在此與大家分享或許對(duì)初學(xué)2013-09-06
- 本文給大家分享CSS 垂直水平居中的5種最佳解決方案以及各自的優(yōu)缺點(diǎn)，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-01-11