首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么用px显示表格居中项目,而不用vw vh?

在前端开发中,通常使用px来显示表格居中项目,而不使用vw和vh的原因有以下几点:

  1. px是绝对单位,而vw和vh是相对单位。px是基于屏幕分辨率的固定像素单位,可以精确地控制元素的大小和位置。而vw和vh是相对于视口宽度和高度的单位,会根据视口的大小进行相应的调整。在表格居中的场景中,使用px可以更精确地控制表格的位置,确保其在任何屏幕上都能居中显示。
  2. 表格通常是基于内容的布局,而不是基于视口的布局。表格中的内容通常是根据实际数据动态生成的,而不是根据视口的大小来调整的。因此,使用px来显示表格居中项目更符合表格布局的特点,可以更好地适应不同尺寸的表格内容。
  3. vw和vh在某些情况下可能导致布局问题。由于vw和vh是相对单位,当视口的大小发生变化时,元素的大小和位置也会相应地发生变化。这可能导致表格在不同尺寸的视口上显示不一致,甚至可能导致表格内容的重叠或溢出。因此,为了确保表格的稳定和一致性,使用px来显示表格居中项目是更可靠的选择。

总结起来,使用px来显示表格居中项目更适合表格布局的特点,可以更精确地控制表格的位置和大小,确保在不同尺寸的屏幕上都能居中显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

单屏页面响应式适配玩法

假设浏览器可视区高度 720px,某个元素的宽度 300px,那应该写成多少 vh 才与 300px 相等呢,如下。...so… 对于我们的页面选择 vh 一举两得,不用写很多 rem 匹配,也不会出现溢出的问题。...根字体小于 12px 以后,rem 对应的值则都是设置的倍数乘以 12;设置根字体 vh, vw 单位同理,rem 会在 vh, vw 换算达到 12 以后就不再改变。...8.2、落地方案,vh + vw + JavaScript 计算 直接在元素的属性值上设置 vhvw,所有的值都会实时变动,没有最小值(除了属性字体有最小值),这样就最大程度减少 UI 变乱的情况了...把 .vw-mode 下的内容设置上下居中。 通过 JS 计算,当可视区比例竖向比例时,则在顶层元素加上 .vw-mode 类名,当比例横向比例时,则去掉 .vw-mode 类名。

2K20

CSS3 的视口单位vwvh实现自适应(带有px,em,rem的简单介绍)

一、px,em,rem,vw的简单介绍 ? 1、px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。...而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。...和百分比不一样的是,vw始终相对于可视窗口的宽度,百分比和其父元素的宽度有关。 vh就是可视窗口的高度了。...这边顺便提一下vmin和vmax,vmin是指选择vwvh中最小的那个,vmax是选择最大的那个 兼容性方面是vwvh的短板了,如下图所示,使用vwvh所需求的版本还是较高的 ?...二、使用vwvh能做什么 1、响应式页面轻松搞定 由于vwvh的特性,他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局 2、小技巧之响应垂直居中 可以使用vwvh来实现在页面中响应垂直居中

2K10
  • 移动web开发01

    Flex布局常见属性 justify-content属性 设置主轴子元素排列 flex-start 所有子元素在主轴头部显示 flex-end 所有子元素在主轴尾部显示 flex-center 所有子元素在主轴居中对齐...align-items 设置侧轴子元素排列 align-items的值center 表示居中显示 align-items的值stretch 会将子元素拉伸 align-self 控制某个弹性盒子在侧轴的对齐方式...flex-direction 改变元素排列方向 row   改成x 默认值 column   改成y 移动适配 移动适配使用的两种类型的单位,rem和vw/vh。...37.5得到几个rem vw / vh 是一个相对单位,相对视口的尺寸计算结果vw:viewport widthl  ,vh:viewport height 1vw = 1/100视口宽度 1vh =...1/100视口高度 vw的好处自动是视口宽度的1/100 自动计算不需要在引入额外js,不过又移动兼容性问题 设计稿一般是375px,1vw就是3.75px flexible 移动设备视口宽度很多,我们不能一个一个使用媒体查询

    1.3K40

    css 元素居中

    不用relative的原因是已经用了绝对定位了,所以只好用负margin。结果如图 ? (3)块级元素的宽高不固定,就不能用负margin了(margin使用百分比是相对于父元素的宽度)。...3、vertical-align实现水平垂直居中 原理: 通过text-align:center 实现水平居中 通过伪元素设置一个内容空的元素,设置高度100%,通过vertical-align实现基线对齐...4、table-cell实现居中 原理:把box设置表格元素(display: table-cell),通过vertical-align: middle对里面的元素做垂直居中 缺点:把box设置display...display: flex实现 代码:demo .space { width: 100vw...; height: 100vh; /* 设置宽高以显示居中效果 */ display: flex; /* 弹性布局 */ align-items: center; /* 垂直居中 */

    3.6K20

    CSS Viewport 单位,很多人还不知道使用它来快速布局!

    视口单位vwvh,vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。 视口宽度 vw单位表示根元素宽度的百分比,1vw等于视口宽度的1%。 ?...假设我们有一个元素与以下CSS: .element { width: 50vw; } 当视口宽度500px时,50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...我们有一个元素与以下CSS: .element { height: 50vh; } 当视口高度290px时,70vh计算如下: height = 290*70% = 202px 大家都说简历没项目写...2.添加 margin-left: -50vw 为了使图像居中,我们需要给它一个负的边距,其宽度视口宽度的一半。 ?...我们支持边框的初始值3px。 如何将固定值转换为视口对象?下面是如何计算它的等效的vw

    3.3K30

    01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】

    例如如下示例: 图片 该示渐变色左上角到右下角渐变,颜色依次是红、绿、蓝,这三种颜色如何做到蓝色渐变只有一小块,大部分是绿色渐变,我们仔细观察,红色的非渐变区域只有左上角一小部分,那如何制作出这样的渐变效果呢...2.2 渐变形状 径向渐变可以设置渐变形状,例如我设置一个水平半径50px,垂直半径 100px 的径向渐变,代码如下: background: radial-gradient(50px...,此图片超出范围并不进行显示,此时我们使用 background-position 更改样式后如下: div { width: 300px; height: 300px..."> 此时我们可以看到,设置了一个渐变色,使用了 closest-side ,在大小设置 130vw 130vhvwvh是视窗大小),background-position...; color: white; } 直接设置 span 行高整个屏幕行高即可垂直居中

    5.7K10

    vw, vh视窗宽高单位的使用

    我不想直接吐露;请跟随我的学习印记以及心理历程一起去寻找答案吧~~ 二、需要提前知道的兼容性 vwvh, vmin(vm)这几个视区相关单位,在2012年9月23号这天的兼容性:Chrome 20...支持vh单位的IE9浏览器呢~~当当当当,见下面截图: ?...其目前是不支持vwvh单位的啊!? 原因就在于,覆盖层固定定位(fixed)元素(绝对定位(absolute)元素也如此)。...拖动range控件,可以看到图片尺寸无论怎样变,弹框总是居中的——纯CSS实现,没有JavaScript的计算与定位,您有兴趣可以研究研究的~~ 正如上面所提到的,某些情况下,vwvh所产生的效果与百分比...本demo 元素还可以设置float:left或inline-block两端/居中对齐等,让一屏的水平方向显示多个page页面,就如实际的office word一样。

    2.5K10

    17个场景,带你入门CSS布局

    场景02 全屏:元素宽高与浏览器可视区域大小一致 可以用单位 vwvh 实现元素宽高与浏览器可视区域大小一致。1vw 等于浏览器可视区域宽度的1%,1vh 等于浏览器可视区域高度的1%。...因此,实现全屏只需要这么写: { width: 100vw; height: 100vh; } 主流浏览器均兼容 vwvh。...为了能将设计稿中的 px 方便的转换为页面中 rem,我设置 1rem 宽度 750px 的设计稿中的 100px。...场景09 多个块级元素的在一行或多行中显示 用 Flex 布局可以实现多个块级元素的在一行或多行中显示。Flex 布局的 Flex项目,会在一行中显示。...绝对定位元素水平居中时,距定位元素左侧的值 50%*定位元素宽度 - 50%*元素宽度。

    2.6K20

    一次性把所有普通和经典的网页布局讲得通通透透的,多图预警,建议收藏

    Flex容器和Flex项目上设置对齐方式 你可能已经知道在Flex容器上设置justify-content、align-items的值center时,可以让元素在Flex容器中达到水平垂直居中的效果。...,不同的是在Icon图标容器上显示设置display: inline-flex。...margin: auto 如果在Flex容器中只有一个Flex项目,还可以显式在Flex项目中显式设置margin的值auto,这样也可以让Flex项目在Flex容器中水平垂直居中。...- 18vh) / 4); /* calc(100vw -18vh) / 4 是flex-basis的基准值 */ } Demo(https://codepen.io/airen/embed/dyGdBpw...的宽度不会大于500px(有点类似于元素设置了max-width: 500px) 首选值VAL50vw,只有当视窗的宽度大于200px且小于1000px时才会有效,即元素.element的宽度50vw

    5.8K10

    Rem布局的原理解析

    我一直觉得em就是字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小;rem的有点在于统一的参考系。 Rem布局原理 rem布局的本质是什么?...} 下面来验证下上面的计算是否正确,下面的表格是UE图等比缩放下,元素的宽度 UE图宽度 UE图中元素宽度 640px 100px 480px 75px 320px 50px 下面的表格是通过我们的元素在不同屏幕宽度下的计算值...} 比Rem更好的方案 上面提到想让页面元素随着页面宽度变化,需要一个新的单位x,x等于屏幕宽度的百分之一,css3带来了rem的同时,也带来了vwvh vw —— 视口宽度的 1/100;vh —...,一般会限制最大宽度,比如在pc端查看我们的页面,此时vw就无法力不从心了,因为除了width有max-width,其他单位都没有,rem可以通过控制html根元素的font-size最大值,轻松解决这个问题...,并水平居中 body { margin: auto; width: 100rem } 第三,如果用户禁用了js怎么破?

    1.2K20

    移动端重构实战系列1——基础知识

    这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度的几种实现 新单位——rem,vwvh... 接上第一个问题,第二个问题是:那是不是要用rem?...CSS3的REM设置字体大小 rem不是神农草,治不了移动端百病 vw, vh等新单位介绍(安卓4.4+支持) PS:然而,我们这个系列的教程并没有用到以上这些高大上单位,不过你还是需要了解,尤其是下面的...vw, vh系列的单位,因为以后将会是个得力的助手 flex 不用多介绍,大名如雷贯耳。...居中居中,还是居中,重要的话说三次!!!...这里除了之前css2时代的常规方法,我们更多的使用css3的transform及flex方法,img或video的最新object-position还得等待兼容的时代 Centering in CSS

    1.1K11

    前端知识点总结(html+css)(上)

    众所周知,前端内容多杂,经过查阅各种资料,总结了一些知识点,以备后续复习使用。文章分为上(html,css)中(js)下(vue)三部分。...(如div下可包含div) 行内元素(常见的行内元素a,span.img) 一行显示多个 宽度内容的宽度 不可以设置高度和宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素的特征...: center; } .child { width: 100px; height: 100px; background: slateblue; } div绝对定位水平垂直居中(margin...vwvh:都是针对当前浏览器窗口大小而言,1vw就等于可视窗口宽度的百分之一,1vh 就等于可视窗口高度的百分之一。...不定高:父:flex,子:margin:auto,0 不定高:父:flex,align-items: center 水平垂直居中 子元素块级元素:父:flex,子:margin:auto

    33611

    图形编辑器开发:缩放至适应画布

    更多填充策略,看我的这篇文章: 《在容器内显示图片的五种方案:contain、cover、fill、none、scale-down》 我们需要比较 bbox 的宽高比和视口 viewport 的宽高比。...} 然后就是 小矩形在大矩形下垂直水平居中 的简单算法。...= viewport.height; // 这里可以加个边距 const vw = viewport.width; const viewportRatio = vw / vh; const...加了 50px 的边距,这样内容就不再紧贴视口边缘了,选中图形图像的控制点不至于跑到视口外。 思路是,计算 newZoom 时用的 vwvh,在原来的基础减去 padding,再去计算。...//(2)计算 newZoom const padding = 50; const vh = viewport.height - padding * 2; // 注意考虑 vhvw 是负数的情况

    27430

    解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

    遗憾的是,对于绝大多数CSS属性(包括 margin)来说,百分比都是以其父元素的尺寸基准进行解析的。...不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。       1) vw 是与视口宽度相关的。...与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,不是 100%。        2)  与 vw 类似,1vh 表示视口高度的 1%。        ...3)  当视口宽度小于高度时,1vmin 等于 1vw,否则等于 1vh。        4)  当视口宽度大于高度时,1vmax 等于 1vw,否则等于 1vh。...#box{ display: flex; min-height:50vh; margin:0; width:500px; height

    1.8K70

    移动端重构实战系列1——基础知识

    这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度的几种实现 新单位——rem,vwvh... 接上第一个问题,第二个问题是:那是不是要用rem?...CSS3的REM设置字体大小 rem不是神农草,治不了移动端百病 vw, vh等新单位介绍(安卓4.4+支持) PS:然而,我们这个系列的教程并没有用到以上这些高大上单位,不过你还是需要了解,尤其是下面的...vw, vh系列的单位,因为以后将会是个得力的助手 flex 不用多介绍,大名如雷贯耳。...居中居中,还是居中,重要的话说三次!!!...这里除了之前css2时代的常规方法,我们更多的使用css3的transform及flex方法,img或video的最新object-position还得等待兼容的时代 Centering in CSS

    52831

    移动端重构实战系列1——基础知识

    这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度的几种实现 新单位——rem,vwvh... 接上第一个问题,第二个问题是:那是不是要用rem?...CSS3的REM设置字体大小 rem不是神农草,治不了移动端百病 vw, vh等新单位介绍(安卓4.4+支持) PS:然而,我们这个系列的教程并没有用到以上这些高大上单位,不过你还是需要了解,尤其是下面的...vw, vh系列的单位,因为以后将会是个得力的助手 flex 不用多介绍,大名如雷贯耳。...居中居中,还是居中,重要的话说三次!!!...这里除了之前css2时代的常规方法,我们更多的使用css3的transform及flex方法,img或video的最新object-position还得等待兼容的时代 Centering in CSS

    38810

    把所有的东西都对齐吧 - 谈谈垂直居中的解决方案

    一路走来走了不少弯路,希望初入前端的小伙伴们可以走的更加通畅,总结分享给大家: 下面就让我们来探索现代css的强大威力: 基于表格布局法的解决方案 利用表格显示模式,需要用到一些冗余的HTML元素 思路来源...基于曾经在网页早期风靡一时的表格布局法:实现了垂直居中 ...遗憾的是,对于大多数的css属性(包括margin)来说,百分比都是以其父元素的尺寸基准进行解析的. css领域有一个很常见的现象,真正的解决方案往往来自我们最意想不到的地方:利用css变形属性,...但是没有任何技巧十全十美,我们需要注意几点: 我们有时不能选择绝对定位,他对整个布局影响太过强烈 如果需要居中的元素已经在高度上超过了视口,那它的顶部部分就会被视口裁掉 在某些浏览器中,这个方法可能会导致元素的显示模糊...类似,1vh相当于视口的1% 当视口宽度小于高度时,1vmin等于1vw,否则等于1vh 当视口宽度大于高度时,1vmax等于1vw,否则等于1vh 在这个例子中,我们适用外边距的是vh单位 main{

    2.3K60

    7.8 月份新出炉大厂面试题100道整理(原题 + 精讲 1.2万字)(一)

    解答: 1什么是什么是vw/vh css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vwvh外,还有vmin和vmax两个相关的单位...100vw/100vh,那么vw或者vh,下简称vw,很类似百分比单位。...none(元素不会被显示); block(元素将显示块级元素,元素前后会带有换行符); inline(元素会被显示内联元素,元素前后没有换行符); inline-block(行内块元素。...CSS2.1新增的值); table(元素会作为块级表格显示,类似table,表格前后带有换行符); table-row(元素会作为一个表格显示,类似tr); table-cell(元素会作为一个表格单元格显示...参考文档 布局常用解决方案对比(媒体查询、百分比、rem和vw/vh) css中的多种垂直水平居中 JavaScript内存泄露的4种方式及如何避免 vue路由守卫哪几种?

    98530
    领券