利用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 布局比这更加简单，可以说是必学的了，建议去学习。

利用div绘制细线居中的更多相关文章

  1. 利用eChart绘制网页图表

    首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...

  2. css+div上下左右自适应居中

    主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...

  3. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  4. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  5. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  6. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  7. C#利用GDI+绘制旋转文字等效果

    C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...

  8. 利用PowerDesigner绘制PDM生成SQL Server数据库

    PowerDesigner是个很强大的建模工具,可以利用它绘制各种图形,本文利用该工具绘制PDM,进而生成SQL Server数据库. 比如绘制一个简单的学生选课.教师授课管理系统的PDM: pk表示 ...

  9. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

随机推荐

  1. python之面相对象程序设计

    一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/linhaifeng/articles/6428835.html 面向对象的程序设计:路飞学院版 ...

  2. 012_call和apply区别

    一. function fn(a,b) { console.log(this); } fn.call(null,1,2); //call为参数方式 fn.apply(null,[1,2]); //ap ...

  3. Autoware（2）—加载地图数据

    选择Point cloud.Ref选择.autoware/.data/map/pointcloud_map/里面的全选 点Point cloud加载 vector Map和TF同理

  4. 聊聊基准测试的MVP方案

    上篇博客介绍了基准测试的一些思路和方法策略,这篇博客,聊聊基准测试的MVP(最小可行性方案)... 思维导图 一.测试策略 策略名称 阈值 运行时间 性能指标 基线 注释 并发测试 CPU75%+Er ...

  5. 《通过C#学Proto.Actor模型》之Mailbox

    邮箱是Actor模型的一个重要组成部分,负责接收发过来的消息,并保存起来,等待Actor处理.邮箱中维护着两种队列,一种是存系统消息,另一个是存用户消息,系统省是指Started,Stoping,St ...

  6. 循环语句之for循环

    什么是循环语句? 循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否 ...

  7. （poj 2502） Subway 最短路

    题目链接: 题意:在一个城市里有许多地铁,现在你知道每条地铁的起点  终点与停站点的坐标,知道我们的起始坐标与终点坐标,问加上走路最快到达终点的时间是多少? 方法:求出任意两点的车速时间与步行时间,再 ...

  8. XP_CMDSHELL 执行命令添加 windows 用户的方法

    1. 之前看过不少文档 可以使用 xp_SQLCMD的命令来进行渗透处理, 今天因为公司的服务器又中毒了 自己学习了下. 2. 修改SQLSERVER的设置 远程登录数据库 sqlcmd -S 10. ...

  9. 如何升级centos到最新版本

    本文将教你如何升级centos到最新版本.centos中“update”命令可以一次性更新所有软件到最新版本.注意:不推荐使用update的y选项,-y选项会让你在安装每项更新前都进行确认(译者注:这 ...

  10. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...