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

垂直居中在Internet Explorer 11中使用flex不能正常工作

是因为Internet Explorer 11不完全支持flex布局的所有特性。在IE11中,flex布局的垂直居中可以通过以下方法实现:

  1. 使用display: table和display: table-cell:将父容器设置为display: table,子容器设置为display: table-cell,并使用vertical-align: middle来实现垂直居中。示例代码如下:
代码语言:txt
复制
.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}
  1. 使用position: absolute和transform:将父容器设置为position: relative,子容器设置为position: absolute,并使用top: 50%和transform: translateY(-50%)来实现垂直居中。示例代码如下:
代码语言:txt
复制
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
  1. 使用line-height:如果子容器只有一行文本内容,可以将line-height设置为与父容器高度相等的值,来实现垂直居中。示例代码如下:
代码语言:txt
复制
.parent {
  height: 200px;
  line-height: 200px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

以上是在Internet Explorer 11中实现垂直居中的几种方法。根据具体的布局需求和浏览器兼容性要求,选择适合的方法来实现垂直居中。

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

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常见的几种 CSS 水平垂直居中解决办法

主要麻烦的地方还是垂直居中的处理上,所以接下来主要考虑垂直方向上的居中实现。...图片的居中也同理。 ? ? 四、IE6下的解决方案 IE6这么霸道..不过还是可以 以bug攻bug Internet Explorer 6及以下版本中,高度的计算上存在着缺陷的。...Internet Explorer 6中对父元素进行定位后,如果再对子元素 进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的...所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: 注意,要有三个层级才可以~ 喜欢hack的话就直接兼容进去了 ...九、使用css3的Flex布局 Flex布局用法见 上文      flex对IE而言 IE10+ 才支持 比如我想让box中那几个div都水平垂直居中,只要简单设置一下即可。

1.2K10

弹性布局(伸缩布局)

使用方法:父元素设置display:flex 注意:父元素属性设置了flex布局其子元素的float,clear,vertical-align将无效 常用属性 1.flex-direction 调整子元素的排列方向...stretch|默认,使子元素的高度拉伸填充父容器(子元素不指定高度的情况) flex-start|顶部对齐 flex-end|底部对齐 center|垂直居中 3.flex-warp控制是否换行 nowwap...:row | 值 |描述 | |—|—| stretch|使子元素的高度拉伸填充父容器(子元素不指定高度的情况) center|垂直居中 flex-start|顶部对齐 flex-end|底部对齐 space-between...默认自动 flex flex-grow和flex-shrink的复合属性 anign-self:设置单个子元素的对齐方式 值 描述 center 垂直居中 flex-start|顶部对齐 flex-end...|底部对齐 注意: Internet Explorer 和 Safari 浏览器不支持 align-self 属性。

2.5K20
  • 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    而且Css3的flexbox出现之后,解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。...Demo 使用flexbox实现多个块状元素的水平居中 使用之前,首先介绍一下flexbox。...Css3显威力 利用Css3的transform,可以轻松的未知元素的高宽的情况下实现元素的垂直居中。...Demo 法三. flex布局轻松解决 使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。...flexbox 的支持情况如下: Chrome 29+ Firefox 28+ Internet Explorer 11+ Opera 17+ Safari 6.1+ (prefixed with -webkit

    1.4K40

    初识flex布局

    相反 center 主轴居中对齐(如果主轴是x轴侧水平居中) space-around 平分剩余空间 space-between |左右的盒子贴近父盒子,中间的平均分布空白间距 space-between...) flex-start顶部对齐 flex-end底部对齐 center垂直居中 flex-warp控制是否换行 nowwap不换行(压缩形式显示) wrap自动换行 wrap-reverse自动换行(...(子元素不指定高度的情况) center垂直居中 flex-start顶部对齐 flex-end底部对齐 space-between左右的盒子贴近父盒子,中间的平均分布空白间距 space-around...默认自动 flex flex-grow和flex-shrink的复合属性,简单理解为占多少份 anign-self:设置单个子元素的对齐方式 值 描述 center 垂直居中 flex-start 顶部对齐...flex-end 底部对齐 注意: Internet Explorer 和 Safari 浏览器不支持 align-self 属性。

    72610

    flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

    常见的取值有: flex-start:元素排列容器的起始位置(默认值)。 flex-end:元素排列容器的末尾。 center:元素容器内水平居中。...flex-end:子元素交叉轴的末端对齐。 center:子元素交叉轴上垂直居中对齐。 baseline:子元素以其文本基线对齐。...; } 如上图所示,justify-content: center; 使元素水平方向居中;align-items: flex-start; 使元素垂直方向靠近顶部。...: flex-end; } 如上图所示,justify-content: flex-start; 使元素水平方向居左;align-items: flex-end; 使元素垂直方向靠底。...它的工作原理是: Flexbox 布局中,margin: auto; 会根据父容器的剩余空间自动调整元素的外边距,直到子元素居中

    13010

    CSS教程:div垂直居中的N种方法「建议收藏」

    二、多行未知高度文字的垂直居中     如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中使用到的最后一种方法,就是设定Padding...Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法 Internet Explorer 6及以下的版本中是无效的。...不过我们还其它的办法  四、Internet Explorer中的解决方案     Internet Explorer 6及以下版本中,高度的计算上存在着缺陷的。...Internet Explorer 6中对父元素进行定位后,如果再对子元素 进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的...所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:  div#wrap {       border:1px solid #FF0099;    background-color

    1.2K30

    机制和原理——弹性盒布局

    垂直于主轴的那根轴称为侧轴(cross axis)。...flex-direction 决定主轴的方向(即条目的排列方向),可以是水平方向(自左向右,或自右向左),也可以是垂直方向(自上而下或自下而上) flex-wrap 定义如果一条轴线排不下所有条目,...flex-flow 定义条目主轴上的对齐方式(左对齐,右对齐,居中,两端对齐,每个项目两侧的间隔相等) justify-content 定义条目交叉轴上如何对齐 align-items 定义了多根轴线的对齐方式...column-* float 使用float将使元素的 display 属性计为block clear vertical-align 浏览器支持 Chrome 29+ Firefox 28+ Internet...Explorer 11+ Opera 17+ Safari 6.1+ (前缀: -webkit-) Android 4.4+ iOS 7.1+ (前缀: -webkit-)

    1.2K10

    10 个你需要熟悉的 CSS3 属性

    border-radius: 50px; 而且,如果我们想找点乐子,我们还可以利用灵活框模型(#8 中详细介绍)将文本圆圈内垂直和水平居中。它需要一些代码,但只是因为需要补偿各种供应商。...Internet Explorer 从 IE6 开始就提供了对这个属性的支持?他们创造了它!...我们可以通过使用新 box-flex 属性来解决这个问题。 flex 指示元素占用所有可用空间。...现在所有主流浏览器都支持此功能,您可以预期它可以超过 99% 的设备上正常工作。...水平和垂直居中 接下来,我希望我们的卡片在屏幕上完全居中。为此,我们将利用灵活盒模型。 由于我们的页面将只包含这张卡片,我们可以有效地使用该 body 元素作为我们的包装器。

    2K00

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

    既然可以使用第一种方式对行元素达成垂直居中的话,当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待,所以我们必须要将这些数据多包一层,并将其设定为inline-block,...并在该inline-block对象的外层对象使用inline-block来代替height的设置,如此便可以达到垂直居中的目的了,从使你的数据是包含了标题跟内容在内也可以正常垂直居中了。...,再搭配上将需要居中的子元素同样设置成inline-block性质后,就能使用vertical-align:middle来达到垂直居中的目的了,此方式以往其实是个非常棒的垂直居中解决方案,唯独需要特别处理掉...+ align-content 适用情景:多行文字的垂直居中技巧 正常的状况下,align-content 仅能对次轴多行flex item做居中,但是当我今天子层元素不确定有多少个时,且有时可能会有单个的情况出现时...这也算垂直居中技巧,连我奶奶都知道这方式吧 对的,这的确也算是一种垂直居中的方式,不可讳言的这方式真的是简单过头了,以至于有些开发者认为这种方式都不能算是一种垂直居中的技巧,但同样的你无法反驳的是,我的数据的确垂直居中

    1.1K30

    css布局 - 工作中常见的两栏布局案例及分析

    四、图文两列布局 1、左图右文字非垂直居中,以右侧内容撑开高度为自由高度。这种的我们省心,不用考虑垂直居中的问题。 ?...2、左图,右固定行数的文字,右侧文字和左边图片垂直居中。这种实现方式就有限了。 ? 同上,左图右多行文字垂直居中,(截图这里限制了两行)但实际开发中,我遇到过有的设计稿不限制行数还要有垂直居中的。...不过我们为了自适应的垂直居中,也就是假如我下边那行座右铭文字过多换行的话,整个右边红框区域还能垂直居中: 这里我们用flex实现: ? ? 示例效果: ?...其实都不能算是需要我们注意的正儿八经的两列结构了。但是我想说的是我们工作中,常常抓耳挠腮的不是他的实现。...而是垂直方向上要求icon和文字居中的适配问题: a、垂直居中问题: 图和文字都是内联块元素,我一般都使用vertical-align实现, b、垂直居中适配问题: 使用了vertical-align

    2.8K11

    CSS十问之元素居中

    (毕竟在Web 领域,CSS也是有举足轻重的作用)该系列文章中,我们会一起学习 「元素居中」、「层叠上下文」还有一些面试中比较常见的问题及一些在工作中遇到比较好玩的点。...,遇事不决「flex/grid」 ❞ 文章概要 水平居中 垂直居中 水平&垂直居中 知识点简讲 元素分类 CSS世界中,基本上分为「两类」元素 块级元素 行内元素 常见的块级元素有div/li/table...垂直居中 行内元素-垂直居中 针对行内元素的垂直居中,有分两种情况 「单行」垂直居中 「多行」垂直居中 单行垂直居中 例如,现在希望某个行内元素的文案垂直方向居中显示。...display: flex; flex-direction: column; justify-content: center; height:200px; //这里不能缺少 } 「Note...元素水平垂直居中 针对处理这类问题,我们可以通过将 「水平居中」和「垂直居中」合并起来。可以有(M*N)的解法。但是,平时工作中,大致可分为四类。

    1.7K10

    CSS(初级)笔记

    涵盖内容 1.熟悉css基本语法,以及css工作原理 2.熟练使用css selector 常规选择器class,id,元素,后代,通用,了解选择器的优先级 3.熟悉浮动,定位,盒模型,背景,字体,...颜色等常用属性,能运用css进行页面布局和展现效果图 ---- css的工作原理 css的出现使得内容和样式分离进而让页面变得更简洁,更容易维护。...mozilla开发者文档里是这样描述的: 浏览器展现文档的时候,需要把文档内容和相应的样式信息结合起来展现。 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。...Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。...元素居中对齐 元素水平居中margin: auto; 文本水平居中text-align: center; 垂直居中 - 使用 line-height 垂直居中 - 使用 position

    1.1K30

    让div水平垂直居中的几种方法

    前言导读 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易,但要实现垂直居中并不容易。而且有些方法一些浏览器中无效。...下面我们看一下使对象垂直集中的几种不同方法,以及它们各自的优缺点。 表格布局 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align 属性。...缺点: Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)....但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中使用 margin:auto;使块级元素垂直居中是很简单的。...缺点: IE(IE8 beta)中无效 无足够空间时,content 被截断,但是不会有滚动条出现 如何让文本水平垂直居中 css居中属性

    2.1K20

    探秘 flex 上下文中神奇的自动 margin

    CodePen Demo -- 使用 margin auto 水平垂直居中元素 如何让 margin: auto 垂直方向上居中元素 嗯。...换句话说,传统的 display: block BFC(块格式化上下文)下,为什么 margin: auto 水平方向可以居中元素垂直方向却不行?...但是如果我们想让元素相对父元素垂直居中的话,使用 margin: auto 0是不生效的。...使用 FFC/GFC 使 margin: auto 垂直方向上居中元素 OK,这里要使单个元素使用 margin: auto 垂直方向上能够居中元素,需要让该元素处于 FFC(flex formatting...这里有 5 行文案,我们需要其中的第三、第四行相对于剩余空间进行垂直居中。 这里如果使用 flex 布局,简单的 align-self 或者 align-items 好像都没法快速解决问题。

    1.5K40

    css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需: ?  整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充。...注意padding或margin值=左边图片的宽度+二者之间的间距 如果想要图片和文案是垂直居中的不太好实现 不过张大神说,这种左右结构的布局使用浮动,是对浮动的一种滥用(大概是这么个意思,也有可能我对其有曲解...* 适用于可以设置固定宽度的元素右边的结构 四、flex - 弹性布局 推荐阮一峰老师的flex讲解 html: <div...;以实现垂直居中 图片固宽元素不需要特殊设置,宽高即可 流体文案设置flex:1;自动分配剩余空间。...垂直居中布局-两列都这么设置:   display: inline-block;   vertical-align: middle; *最后说明: 这些都是自己照着设计稿现撸的不成熟的实现条件,具体工作中用的方法也就其中两三个

    1.8K20

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

    不仅文字和行数少一点的时候,不能完全的垂直居中。甚至文字再多会有这样的现象: ? 可见这种假设不合理。 所以单独设置一个行高就解决垂直居中问题看似大快人心,但是代码很不健壮,只局限于特别个别的情况。...但是真的要1像素走查的时候,你又会发现,这种做法还是不能完全完全的垂直居中,底部还是差那么一两像素。这个问题接下来再说。...只不过其他场景使用translate有点大材小用。 关键点分析: 利用transform来实现垂直居中布局: box盒使用固定宽度的width+margin auto,实现水平居中。...但是这种布局方式毕竟拘束,实现垂直居中后,还需要一大堆的代码把tabel的样子抹掉。 所以知道有这种方法,平时根本不用也没必要用,我也不去实践了。...(四)小机灵鬼儿translate对应方向上的-50% 具体原理和使用方法及案例见上边。不再赘述。 (五)flex大大一句话 水平垂直全拿下 ? 这个相信不用我说,大家一看就明白怎么回事了。

    3.5K10
    领券