css 水平居中，垂直居中，自适应宽度的代码

ttx9n · 发表于 2012-6-14 13:09:40

宽度自适应：就是元素的宽度根居里面的内容来变化一、宽度自适应的元素水平居中：

　　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;别无选择！）

0qfjyf · 发表于 2022-9-13 03:03:36

管灌灌灌灌灌灌灌灌灌灌

70r45_zs · 发表于 2022-12-27 08:25:36

还有人在不。。。。。。。。。。啊

u6h2m4 · 发表于 2022-12-30 23:05:07

天天源码社区。。。。

雪龙Ui79 · 发表于 2023-2-10 23:25:26

看到这帖子真是高兴！

thywok · 发表于 2023-3-10 10:04:34

啪啪啪生怕PSP怕

qzdhcgs · 发表于 2023-3-21 02:09:30

老大你好你好好你好

czoz5y · 发表于 2023-11-4 04:01:22

逛逛看看瞧瞧

bp5jgbcnt · 发表于 2024-4-1 21:13:44

。。。。。。。。。。。。。。。

溪谷玉贤 · 发表于 2024-6-14 17:13:13

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

账号		自动登录	找回密码
密码			立即注册

[CSS] css 水平居中，垂直居中，自适应宽度的代码

相关帖子