html图标页面横向居中,结构-行为-样式-css&html横纵居中最佳实践

最近在做手机端的H5项目，有个标题是在一根横线中的，就是水平居中加垂直居中(如图一)。这应该是前端开发中经常遇到的一个场景了，做的次数多了就有一些体会，我今天就总结了下这种结构的实现思路：首先，用元素的Border来做这根线；然后，线与文字在同一个父级元素下；最后，设置线为绝定位，文字相对定位，设置文字高度为线Margin值的两倍；

图一：

相应Html：

精选留言

相应Css：

.comment .top-zone{padding:0 5%;height:90px;text-align:center;position:relative;}

.comment .top-line{width:92%;margin:0 4%;border-top:2px solid #ddd;margin-top:45px;position:absolute;display:inline-block;}

.comment .top-zone .zone-title{display:inline-block;width:70px;padding:3px 15px;margin-top:31px;background-color:#f3f3f3;color:#666;}

好了