幽灵资源网 Design By www.bzswh.com
一、宽度自适应的元素水平居中：
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;别无选择！）
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;别无选择！）
标签：
水平居中,垂直居中
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...