利用div配合css代码实现细线方式:
块级元素水平居中步骤：
- 设置宽度width
- 设置margin-left:auto;
- 设置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 布局比这更加简单，可以说是必学的了，建议去学习。