不考虑兼容，可以使用transform:scale(.5，.5)样式，就是把元素缩小0.5倍。例子如下：
.content{position:relative
}
.content:before{
content: ''
position: absolute
width: 200%
height: 1px
bottom: 0
border-bottom: 1px solid #d6e4ed
-webkit-transform-origin: 0 0
transform-origin: 0 0
-webkit-transform: scale(.5,.5)
transform: scale(.5,.5)
-webkit-box-sizing: border-box
box-sizing: border-box
}
大致原理是：通过CSS3插入一个伪元素，该元素宽度为父级2倍，高度为1px，然后通过css3缩放将其缩小0.5倍，从未实现一个0.5px的边框。
1.position:absolute+transform:translate(-50%,-50%)2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)
3.flex
4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中
5.display:table-cellvertical-align:middletext-align:center
6.calc函数计算实现
1. DOM结构 ：元素不会渲染
2. 事件监听 ：不能监听DOM事件
3. 继承 ：子元素不会继承
4. 性能 ：改变此属性会重排，性能较差
1. DOM结构 ：元素会渲染
2. 事件监听 ：能监听DOM事件
3. 继承 ：子元素会继承，可以通过visibility:visible来取消继承
4. 性能 ：改变此属性会重绘，性能较好
1. DOM结构 ：元素会渲染
2. 事件监听 ：能监听DOM事件
3. 继承 ：子元素会继承，而且不能通过opcity：1来取消隐藏
4. 性能 ：改变此属性会重绘，性能较好
window.divicePixelRatio=2(默认)
意思是：我们css中1px相当于实际移动端设备2px
1.border-width:0.5px
2.box-shadow内阴影模拟边框，
box-shadow:inset 0px -1px 1px 1px red
3.通过viewport设置rem的基准值，就可以直接写rem了，较好的解决方案
4.伪类+transform
通过:after或:before设置border，结合定位
两侧宽度固定，中间宽度自适应
所以我们要尽量少使用以上属性和方法
