开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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

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

有帮助

没帮助

相关·内容

CSS笔记

link rel=”stylesheet” href=”文件名” margin:0px auto;（块级元素居中）和width：的组合写2个数：第一个代表上下，第二个代表左右写3个数:第一个代表上，第二个代表左右,第三个下写4个数：上，右，下,左 text-align:center；（行级元素居中） list-style：none （去除符号） clear：both（去除浮动） overflow:hidden;(超过大小就不显示) overflow:scroll 滚动条 border:none;outline:none;去除按钮边框

01

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

在Css中对元素进行水平居中是很简单的，如果他是一个行内元素，对它的父元素应用text-align:center；如果是一个块级元素，就对自身应用margin:auto。然而如果要对一个元素进行垂直居中，想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中，对当下流行的几种技巧不做讨论，原因如下：表格布局法：需要用到一些冗余的HTML元素行内块法：这个方法Hack味道过浓。一、基于绝对定位的垂直居中以下两种技巧都需要使用绝对定位 calc实现内容部分必须固定宽和高 tra

08

元素、文字垂直居中

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

移动端样式问题汇总

-webkit-tap-highlight-color：rgba（0，0，0，0）;

02

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

这个组合，常用于图片的居中显示，子元素设置绝对定位,父级元素相对定位,也可以将父元素 ·wrapper的相对定位，移入子元素img中，替换掉绝对定位。效果也是一样的

01

CSS之垂直水平居中的背后

最开始，我想说，这个体系有点大，我写的并不好。就当作是一个思路吧，虽然这个思路有点乱。几乎每一个实现方案的背后都是该属性及其组合的原理，每一个都要剖析其规范细节的话，这篇文章绝不会是这样的篇幅，所以每当需要说更多的时候我都简单阐述后一笔带过，然后附上参考资料。后面若是写css系列的时候再详细讲吧。

01

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

效果图如下代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../../jquery-1.7.2.min.js"></script> </head> <body>

02

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

详情查看https://www.runoob.com/w3cnote/flex- grammar.html

00

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</title> <meta charset="utf-8"> </head> <style type="text/css"> .box { /* 在一个基础的盒子里面显示效果 */ position: relative; float: left; width: 250px; h

03

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

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。

03

CSS 居中

给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现

01

前端面试【CSS】— 让元素垂直居中的方法有哪些？

如何让元素垂直居中？这是一道很常见的面试题，大致有以下5种： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>让元素垂直居中的方法有哪些

02

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

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。

01

css布局 - 垂直居中布局的一百种实现方式（更新中...）

1. line-height行高简单粗暴实现法：line-height：Npx（N = 与元素高度相同的值）

01

无固定高度的div垂直居中

1、无固定高度的div垂直居中 – CSS 实现效果图如下：代码附上： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">

04

【CSS】202-23个CSS垂直居中技巧汇总

来自：CSS可樂，作者：@Amos 来自：http://csscoke.com/2018/08/21/css-vertical-align/ @CSS coke，一個熱愛CSS的開發者的筆記部落格，站

03

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;

02

居中那些事情

可以知道，让一个元素水平居中可以使内容是inline或inline-block 非文本场景下，其实padding也可以实现相同效果。这个可以根据内容自适应，不然这样一来外层容器宽度就不固定了。

03

CSS设置居中的方案总结-超全

张鑫旭老师的博客也有提到过：我所知道的几种display:table-cell的应用

01

让div垂直水平居中的方法

关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。

01

居中那些事情

居中那点事最近碰到一些居中的问题需要处理，这里整理下碰到的问题以及一些解决的方案文本水平居中 text-align:center; 可以知道，让一个元素水平居中可以使内容是inline或inlin

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

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

02

8种垂直居中的方法

方法6 absolute+margin:auto 和方法5类似，当宽度和高度未知时使用

02

前端面试经典问题：CSS中居中的几种方式

作为面试常客，学会这些，面试多点把握，同学间逼格升高周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！参考了这篇文章，快速传送门内容都是我手敲实践过的可靠！ ![](img1.jpg)这类的其实是img标签，这个markdown转换有问题，特来提醒 1.水平居中的 margin：0 auto; 关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响 <style>

06

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。

02

CSS3

值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；

09

CSS伪类：CSS3鼠标滑过按钮动画

按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。

02

CSS实现水平垂直居中的1010种方式（史上最全）

要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库

02

水平垂直居中的六种方法

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

03

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

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找? 清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我

02

CSS奇思妙想 -- 使用 CSS 创造艺术

本文属于 CSS 绘图技巧其中一篇。之前有过一篇：在 CSS 中使用三角函数绘制曲线图形及展示动画

02

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;

03

div盒子水平垂直居中方法

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上

03

移动端H5各种各样的列表的制作方法(五) by FungLeo

在第四章中,我们学习了如何来做一个双列的图文列表.但是,这个图文列表是有一定的局限的.局限就是,其中的图片必须为正方形.

01

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

一个周五的晚上，闲来无事整理下自己的 github（经常做收藏党），今天打算都过一遍，发现一个 star很高的项目，里面有大量的 CSS 片段，而且标题很诱人，然后又花了将近1个小时从头到尾过了一遍，其中一些是我们常用的一些知识点，另外也包含一些比较新的属性的应用，知识点挺多的，为了让大家看起来更方便些，然后又花了点（很长很长）时间翻译成中文。

01

前端系列第3集-如何理解css盒子型?

CSS盒子模型是一种设计网页布局的概念，它将每个HTML元素表示为一个盒子，该盒子由内容、内边距、边框和外边距组成，这些部分共同构成了一个完整的盒子模型。

01

【分享干货】做网页设计的常用css代码大全

color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/

01

CSS垂直居中的七个方法

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。

04

CSS垂直居中的七个方法

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline，inline-block），例如单行的标题，或者已经设置inline-block属性的div，若将line -height设成和高度相同的数值，则内容的行内元素就会被垂直居中，因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直居中了！不过由此就可以抛光，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间隔会变超大，就不是我们所期望的效果了。CSS示例：

03

居中对齐的几种方法

这是因为，根据规范，父元素的子元素的上边距( margin-top)，如果碰不到有效的 border或者 padding，就会一层一层的找自己的祖先元素，直到找到祖先元素有有效的 border或border为止

03

「css实用手册」CSS 垂直居中的七种方法，值得收藏

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

02

「css实用手册」CSS 垂直居中的七种方法，值得收藏

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

03

文本属性

注意：text-shadow(文本阴影)：第一个值表示水平阴影第二个垂直第三模糊距离第四个模糊像素

04

垂直方向上下居中_如何实现垂直居中

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上

04

css实用手册」CSS 垂直居中的七种方法

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

01

前端：水平垂直居中的10种方法

但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，

01

HTML第三课——css【3】

上一节我们讲了display的inline-block属性，但是我们在工作中很少用，因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: left代替。 display的属性none lesson3.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta nam

html——css基础

上一节我们讲了display的inline-block属性，但是我们在工作中很少用，因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: left代替。

05

前端少为人知的知识–前端冷知识集锦（css篇）

以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!

02

常用CSS样式

设置渐变背景,to bottom 表示渐变的方向，这里表示从上到下。 background: linear-gradient(to top, #f5a623, #508114);

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭