开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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下划线的效果。

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

使用flex布局：将父元素设置为display: flex，并使用align-items: center和justify-content: center来实现垂直居中。这种方法可以避免子像素渲染导致的问题。
使用伪元素：给父元素添加一个伪元素，设置其高度为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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【垂直居中高级篇】你不知道的垂直居中方式

一、基于绝对定位的垂直居中以下两种技巧都需要使用绝对定位 calc实现内容部分必须固定宽和高 translate实现内容部分可以自适应宽和高某些浏览器会导致元素模糊，可用transform-style...solid red; } .wrap .cont{ position: absolute; top: calc(50%...left: 50%; transform: translate(-50%,-50%); background: gray; }...:0 auto设置水平居中；margin: auto 0设置垂直居中被居中元素的宽度和高度可以自适应也可以通过flex的align-items和justify-content来实现水平垂直居中示例代码...absolute + translate 和 flexbox可以实现内容部分宽高自应用； absolute + calc 和视口垂直居中，内容部分是需要固定宽高的；不同场景选择没的垂直居中方式很重要

9288 0

如何实现水平垂直居中如何实现一个块级元素的水平垂直居中

1、利用 display:table-cell;属性来实现 display:table-cell;结合vertical-align: middle;使用实现垂直居中，margin:0 atuo;可以实现子元素的水平居中...，通过translate将元素移动自身的50%,50%，实现水平垂直居中。...translate(-50%,-50%) 属性：向上（x轴）和左（y轴），移动自身长宽的 50%，使其居于中心位置。...: 50%; left: 50%; /* 渐进增强 */ -webkit-transform: translate(-50%, -...50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

1.1K0 0

CSS篇-面试题2-如何让一个长度未知的图片水平和垂直方向均居中

前言元素水平垂直居中是 web 开发中常见遇到的问题方法 1-使用transform + absolute 这个组合，常用于图片的居中显示，子元素设置绝对定位,父级元素相对定位,也可以将父元素...wrapper"> css 示例代码 .wrapper { width: 100%; height: 300px; border: 1px.../ left值50% top: 50%; // top值50% transform: translate( -50%, -50% ); // 利用transform变换,translate...: middle; } 方法 3-使用弹性flex布局在实际开发中,很多元素的高度,宽度是不固定的,随着自身的内容撑大而撑大的,怎么让它在页面中实现水平垂直居中显示呢?...width: 100%; height: 300px; border: 1px solid #ccc; } .flex-center { //在父级元素中,添加如下代码即可 display

1K1 0

CSS之垂直水平居中的背后

; height: 50px; border: 1px solid; background: red; transform: translate(75px, 75px); display...height: 50px; border: 1px solid; background: red; transform: translate(150%, 150%); } 　　嗯……好像没毛病...和transform的区别就是inline也可以使用position。...: 50px; border: 1px solid; background: red; position: relative; top: 75px; left: 75px; } 　　...background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

1.6K1 0

元素、文字垂直居中

场景设定：让一个50px*50px的Div在一个200px*200px的Div中垂直居中。...div{ width: 50px; height: 50px; border: 1px solid #f00; } ...; top: 50%; left: 50%; transform: translate(-50%, -50%); /*向左上角移动25px,25px*/ } 属性说明 transform...指定应用的变换功能 transform-origin 指定变换的起点（默认元素的中心点） transform属性值值说明 translate()、translateX、translateY...transform-origin属性的值值说明指定元素x轴或者y轴的起点指定距离 left、center、right 指定x轴上的位置 top、center、bottom 指定

1.7K2 1

2D变形(CSS3)

(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。...可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY...position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 走的自己的一半...该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。...scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放） scale

6075 3

CSS 居中

solid #F00 } 3. float 给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%....middle { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform...: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%...会导致容器溢出是是妨碍渲染 Table-Cell 现代浏览器&IE8+ 是撑开容器否是会加上多余的标记 Inline-Block 现代浏览器&IE8+&IE7* 是撑开容器否是需要使用容器包裹和...hack式的样式 Flexbox 现代浏览器&IE10+ 是会导致容器溢出是是需要使用容器包裹和厂商前缀（vendor prefix）持续更新······ 如有建议或其他实现方法，欢迎留言交流

3.2K1 0

CSS实现水平垂直居中的1024种方式、兼容性分析（史上最全）

--方法三：利用定位实现，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%... <div style="position:fixed;<em>top</em>: <em>50</em>%;left: <em>50</em>%;margin-left: -75px;margin-<em>top</em>: -75px;z-index: 999

3742 0

CSS3 转换(Transform)

转换 transform 能够对元素进行移动、缩放、转动、拉长或拉伸在CSS中，允许元素实现 2D 和 3D的转换效果,主要包含：旋转，缩放，移动，倾斜 2D ：元素只能在X轴和Y...如果第二个参数未提供，则默认值为0 skewx()：指定对象X轴的（水平方向）扭曲 skewy()：指定对象Y轴的（垂直方向）扭曲 3D Transform Functions： matrix3d(...轴位移距离 translate(值1，值2) --> 在x轴和y轴的位移距离取值：数值 | 百分比，可以取负值 x为正，则向右移动； x为负，则向左移动。...50px,50px); -moz-transform:translate(50px,50px); -ms-transform:translate(50px...,50px); transform:translate(50px,50px); }

7572 0

水平居中和垂直居中

和 bottom 为 0 会使其水平垂直居中 */ background-color: pink; } .box .ver-lev1 { position...: 50%; left: 50%; transform: translate(-50%, -50%); /* translate 定义转换, 横纵坐标转换 -50% *...: 受限于容器的宽高, 设置层的外边距水平垂直居中: 不受限于容器的宽高, 利用 `transform...-- 清除前面的左浮动 --> 水平垂直居中: 使用 display 中的 flex 布局 (与 float 或...position 混用会被破坏) 垂直居中: 使用 display 中的 table-cell

2.7K3 0

水平垂直居中的六种方法

方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）　　...图片展示：图片　　代码如下： div{ background:red; position: absolute; left:50%; top:50%; transform...: translate(-50%, -50%); } 方法二: 绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值图片展示：如方法一的图片展示代码如下： div{...: table-cell middle center组合使用展示图如下：图片代码如下： <!...- 200px)/2); top:-moz-calc((160px - 50px)/2); left:calc((400px - 200px)/2); top:calc((160px -

3853 0

每日分享html特效篇之五个加载页面特效和五个导航按钮特效

: translate(-50px,50px); } } /* 填沙动画 */ @keyframes fill-sand{ to{ transform: translate...: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; } /* 圆旋转动画 */ @keyframes...; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow...; top: 0; transform: translate(-50%,-65%); border-radius: 40%; /* 执行动画：动画名称时长线性的无限次播放..."; position: absolute; left: 50%; top: 0; transform: translate(-50%,40px); color:

8K2 0

13·灵魂前端工程师养成-CSS动画

solid red; margin: 50px; } /*hover是鼠标移上去的意思*/ #demo:hover{ transform: translate(50px,50px); }....wrapper{ perspective: 1000px; border: 1px solid black; } 5)translate3d 水平纵向垂直屏幕移动 <!...solid red; margin: 50px; } /*hover是鼠标移上去的意思*/ #demo:hover{ transform: translate3d(50px,50px,200px...solid red; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); } .wrapper...(100%); } } 完整语法二： @keyframes xxx{ 0% { top: 0; left: 0; } 30% { top: 50px; } 68%,72% { left:

1.6K3 0

14种CSS实现水平或垂直居中的技巧

我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了...top: 50%; height: 80px; margin-top: -40px; width: 300px; font-size: 15px; background...原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。...; top: 50%; transform: translate(-50%, -50%); font-size: 15px; background: #afddf3; }...; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } 结语

5253 0

CSS3 2D转换

重点 1>定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素 2>translate最大的优点：不会影响到其他元素的位置 3>translate中的百分比单位是相对于自身元素的 translate...top: 50%; left: 50%; width: 200px; height: 200px; background-color...(-50%, -50%) 盒子往上走自己高度的一半 */ transform: translate(-50%, -50%); }...重点　　1>注意后面的参数 x 和 y 用空格隔开　　2>x y 默认转换的中心点是元素的中心点 (50% 50%) 　　3>还可以给x y 设置像素或者方位名词（top bottom...同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等， 2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向） 3.

4151 0

14种CSS实现水平或垂直居中的技巧

我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了...top: 50%; height: 80px; margin-top: -40px; width: 300px; font-size: 15px; background...原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。...; top: 50%; transform: translate(-50%, -50%); font-size: 15px; background: #afddf3; }...; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } 结语

9131 0

55 个提高你 CSS 开发效率的必备片段

; 绝对定位＋未知宽高＋ translate position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);...，我们可以使用 transform 来让元素进行偏移。...{ background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate3d(...设置垂直方向和水平方向的居中。...; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -

1.3K2 0

8种垂直居中的方法

八种垂直居中的方法垂直居中的需求经常遇到，通过资料实践了八种垂直居中的方法。...该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。...; top: 50%; /*宽高的一半*/ margin-left: -50px; margin-top:...-50px; background-color: powderblue; } 方法6 absolute+margin:auto 和方法5类似，当宽度和高度未知时使用...; top: 50%; transform: translate(-50%,-50%); background-color

2032 0

【CSS】378- 44个 CSS 精选知识点

浏览器支持情况 100% 4.使用表格居中使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。...可在 CodePen 上查看真实效果和编辑代码说明删除所有边框使用 clip 隐藏元素设置宽高为1px 使用margin：-1px取消元素的高度和宽度隐藏元素的溢出移除所有的padding...使用transform居中子元素使用 position:absoluteandtransform:translate() 进行居中，不需要知道父级和子元素的宽高，因此它非常适合响应式应用程序。...: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; } DEMO ?...: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } &:hover::before

5.3K1 0

【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )

: translate 中可以传入百分比值 , 百分比是相对于元素自身尺寸来说的 ; /* 水平方向向右移动元素自身宽度的 50% 距离垂直方向向下移动元素自身高度的 50% 距离...*/ transform: translate(50%, 50%); 移动盒子模型位置的方法 : 通过定位样式移动盒子 : 相对定位 relative 样式 , 绝对定位 absolute 样式 ;...; */ /* 水平方向和垂直方向都移动 100 像素 */ transform: translate(100px, 100px); }...第二步的时候 , 子元素需要往回走一半距离 , 可以使用 Translate 移动 50% 距离实现 ; 1、传统实现方式代码示例传统实现方式代码示例 : <!...: red; /* 往回走子元素一半尺寸 */ transform: translate(-50%, -50%); } </style

6733 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭