使用top: 50%和transform: translate (-50%)垂直居中会导致双1px下划线

使用top: 50%和transform: translate(-50%)垂直居中会导致双1px下划线的原因是由于浏览器在渲染元素时的处理方式。

当使用top: 50%和transform: translate(-50%)来实现垂直居中时，元素的位置会相对于其父元素的高度进行定位。top: 50%将元素的顶部定位在父元素的中间位置，而transform: translate(-50%)则将元素向上移动自身高度的一半，使其垂直居中。

然而，由于浏览器在渲染元素时使用的是子像素渲染，即将元素的宽度或高度分为多个子像素进行渲染，这就导致了一个问题：当元素的高度为奇数像素时，经过top: 50%和transform: translate(-50%)定位后，元素的位置会存在一个子像素的偏移。

这个子像素的偏移会导致元素的底部边界与父元素的底部边界之间存在一个1px的空隙，同时元素的顶部边界与父元素的顶部边界之间也存在一个1px的空隙，从而形成了双1px下划线的效果。

为了解决这个问题，可以采用以下两种方法之一：

1. 使用flex布局：将父元素设置为display: flex，并使用align-items: center和justify-content: center来实现垂直居中。这种方法可以避免子像素渲染导致的问题。
2. 使用伪元素：给父元素添加一个伪元素，设置其高度为1px，并使用position: absolute和bottom: 0来将其定位在父元素的底部。这样可以填补底部的空隙，同时可以使用top: 0和position: relative来将子元素定位在父元素的顶部，从而避免顶部的空隙。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云负载均衡（CLB）：https://cloud.tencent.com/product/clb
• 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
• 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos