利用div绘制细线居中

利用div配合css代码实现细线方式:

块级元素水平居中步骤：

  1. 设置宽度width
  2. 设置margin-left:auto;
  3. 设置margin-right:auto;

实现方法是，让其左右两边的外边距自动计算，达到水平居中的效果，因为块级元素默认占一整行的特性，所以需要设置width宽度才能实现

复合写法：margin:0 auto;第一个值为上下外边距0(因为值是0就是无，所以带不带单位都无所谓了),第二个值为左右外边距自动计算

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
           <meta charset="UTF-8" />
           <title>div细线实现margin居中算法</title>
           <style>
                *{margin:0px;padding:0px;}
                .fu_ji{height:200px;margin-top:99.5px;}
                .xi_xian{height:1px;border-top:1px solid #ddd;}
            </style>
    </head>
    <body>
    <div class="fu_ji">
        <div class="xi_xian"></div>
    </div>
    </body>
</html>

上面代码的计算例子：200 - 1 / 2，200 是父级元素高度，1 是居中元素的高度

margin居中算法：想要居中元素的 高度 减去父级元素的 高度 / 2

 

总结：

想要实现一个元素垂直居中，那么就必须得先知道 父级的高度 和 子级的高度 然后  父级高度 减去 子级高度 就排除了 子级元素自身在垂直方向所占的高度，然后 / 2 就得出了这个子元素应该距离顶部多少值了。

采用最新的 Flex 布局比这更加简单，可以说是必学的了，建议去学习。 

 

posted @ 2017-12-15 17:39  StackOcean  阅读(1194)  评论(0)  编辑  收藏  举报