css 水平居中，垂直居中，自適應寬度的代碼

2024-07-11 08:25:56

字體：大中小

來源：轉載

供稿：網友

一、寬度自適應的元素水平居中：

　　1.寬度自適應的元素可以是：絕對位定、浮動元素、行內元素。而我們通常布局，肯定不會用行內元素，所以會選擇，絕對定位或浮動。
　　2.居中：這里我們應該會想到1/2、50%、一半等這些東西?！　?

　　上圖中：黑色為body，深綠色需要在body中水平居中，并且寬度是自適應的。亮綠色，是一個多余的DIV，就是為了讓深綠色的DIV水平居中。

　　以下是實現代碼：

　　pos元素的float:left或都用position:absolute;都可以，因為這兩個屬可以寬度自適應。

　　先這個多余的DIV亮綠色，水平50%移動(移動，可以用margin-left 或者 left)

　　再讓其內容深綠色向右水平移動50%（只能用right屬性移動）;

　　那么這個深綠色，就會在黑色的body里居中了！

復制代碼

代碼如下:
<body>
<div class="pos">
<div class="boxA">測試用的內內容測測試用的內容</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;}

總結：外層的定位：需要是自適應寬度的;(float:left 或者 position:absolute;)
　　內層的位定：需要是自動100%寬度的（相對于外層100%）;
　　并且是可以移動出外層范圍的;

（所以只能用position:relative;別無選擇?。?

上一篇：網頁設計中常用的度量單位的介紹與比較

下一篇：19樓論壇的前端CSS代碼規范介紹