开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css ie居中

CSS IE居中基础概念

在CSS中，居中布局是一个常见的需求，尤其是在兼容老旧浏览器如Internet Explorer（IE）时。IE浏览器的版本众多，从IE6到IE11，每个版本的CSS支持程度不同，因此需要针对不同版本采取不同的居中策略。

相关优势

用户体验：居中布局可以使页面内容更加美观，提升用户体验。
响应式设计：居中布局有助于实现响应式设计，使页面在不同设备上都能良好显示。
兼容性：针对IE浏览器的居中策略可以确保老旧浏览器用户也能正常访问网站。

类型

水平居中：使元素在其父容器中水平居中。
垂直居中：使元素在其父容器中垂直居中。
水平和垂直居中：使元素在其父容器中同时水平和垂直居中。

应用场景

网页标题
按钮
图片
表单元素

遇到的问题及解决方法

1. IE6/IE7水平居中

问题：在IE6和IE7中，使用margin: 0 auto;无法实现水平居中。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  text-align: center;
}
.center {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
  <div class="center"></div>
</div>
</body>
</html>

2. IE8垂直居中

问题：在IE8中，使用display: table-cell;和vertical-align: middle;无法实现垂直居中。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: table;
  height: 300px;
  width: 100%;
}
.center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">
    <div style="display: inline-block; background-color: red; padding: 20px;">垂直居中内容</div>
  </div>
</div>
</body>
</html>

3. IE9水平和垂直居中

问题：在IE9中，可以使用Flexbox布局，但需要确保兼容性。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 300px;
  width: 100%;
}
.center {
  background-color: red;
  padding: 20px;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">水平和垂直居中内容</div>
</div>
</body>
</html>

参考链接

通过以上方法，可以有效地解决IE浏览器中的居中问题，确保网站在不同浏览器和版本中都能正常显示。

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

有帮助

没帮助

相关·内容

css让div居中显示_css页面居中

css中设置div元素居中显示的四种方法一、先确定div的基本样式二、具体实现方法第一种：利用子绝父相和margin: auto实现第二种：利用子绝父相和过渡动画tranform实现第三种：同样是利用子绝父相和...css结构： css"> *{ margin: 0; height: 0; } .warp{ width: 500px; height: 500px; background-color...注意：calc()函数，CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。.../2); margin-top:calc(-200px/2); } 第四种：利用flex弹性盒布局实现给父级div设置display: flex;将父级div元素转为弹性盒，然后设置主轴对齐方式为居中...justify-content: center;，侧轴对齐方式为居中 align-items: center;即可实现。

13.6K5 0

CSS 居中

一、水平或垂直居中 1....完全居中 text-align css" media="screen">...2.justify-content定义水平方向的元素位置 3.align-items定义垂直方向的元素位置支持：任意宽高不支持IE8-9 三、图片居中 1. align IE9+ 是会导致容器溢出是是妨碍渲染 Table-Cell 现代浏览器&IE8+ 是撑开容器否是会加上多余的标记 Inline-Block 现代浏览器&IE8+&IE7* 是撑开容器

5K1 0

Css 垂直居中

主要摘自：《CSS 揭秘》，强烈推荐的一本书。 “44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。”...——James Anderson(https://twitter.com/jsa/ status/358603820516917249) 在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素...在本篇攻略中，我们将探索现代 CSS 的强大威力，以全新的思路去攻克各种场景下的垂直居中难题。...遗憾的是，对于绝大多数 CSS 属性(包括 margin)来说，百分比都是以其父元素的尺寸为基准进行解析的。 CSS 领域有一个很常见的现象，真正的解决方案往往来自于我们最意想不到的地方。.../w3.org/TR/css-align) 的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。

4.7K1 0

CSS水平居中

方案1: 关键代码：父类text-align: center; 子类display: inline-block; 讲解： text-align: center; 是对文本内容进行居中。...所以看不到这个盒子，但是里面的文字是可以看到的同时也具备了居中效果。...class="parent"> 哈哈优缺点分析优点：只需要对子级元素进行设置就可以实现水平方向居中布局效果...class="parent"> 哈哈优缺点分析优点: 父级元素是否脱离文档流,不影响子级元素水平居中效果...缺点: transform属性是CSS3中新增属性,浏览器支持情况不好

3.9K2 0

css图片居中(水平居中和垂直居中)

css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况，有时候还需要图片同时水平垂直居中，下面分几种居中情况分别介绍。...css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：居中属性，代码如下：这里使用display: table;和display: table-cell;来模拟table，这种方法并不兼容IE6/IE7，IE67...不支持display: table，如果你不需要支持IE67那就可以用缺点：当你设置了display: table;可能会改变你的原有布局居中移动端一般浏览器版本都比较高，所以可以大胆的使用flex布局，（flex布局参考css3的flex布局用法）演示代码如下： css代码： .ui-flex { display: -

7.4K2 0

CSS垂直居中

class="son">哈哈扩展知识 vertical-align属性：用于设置文本内容的垂直方向对齐方式 top:顶部对齐 middle:居中对齐...bottom:底部对齐优缺点分析优点: 浏览器兼容性比较好缺点: vertical-algin属性具有继承性,导致父级元素的文本也是居中显示的方案2 关键代码父类：position...class="parent"> 哈哈优缺点分析优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果...缺点：transform属性是CSS3新属性，浏览器支持情况不好方案3 关键代码父类：position: relative; 子类： position: absolute; top: 0; bottom

5K3 0

css常用居中

对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）： css如下： .parent{height:100px;width:100px;background:grey;position...css如下： .parent{height:200px;width:200px;background:green;position:relative;} .absolutecentercontent...html如下: 1212 css...文字居中: .scatter{ display:block; text-align: justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last...:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20

3.1K6 0

css 元素居中

一：水平居中 1、行内元素水平居中在父元素上设置 text-align: center 使文字/图片水平居中。....container { text-align: center; } 2、块级元素水平居中先给块级元素设置宽度（不设置宽度，块级元素自己占据一整行，何谈居中）再给块级元素设置margin：0 auto...;（当上下margin不一定是0，可以按照需求来设置） .container { width: 200px; margin: 0 auto; } 二、垂直居中 1、块级元素内部垂直居中原理：...我们可以用css3的一个transform的属性，transform是相对自身的宽高来做偏移的。 ?...*/ display: flex; /* 弹性布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中

5K2 0

【前端】CSS : 对齐、居中

介绍文本、元素的对齐和居中在开发中经常会用到。...本文分别对文本、元素的对齐、居中进行介绍文本文本水平居中 { text-align:center } 文本垂直居中将line-height设为和height相同的高度(仅单行可用) { height...水平对齐水平对齐——position position更多用法参考：CSS : position .horizontal-align-right { position: absolute;...水平对齐水平对齐——float float更多用法参考：CSS : float .horizontal-align-right2 { float: right; } 居中 flex更多用法参考：Flex 布局教程：语法篇参考 http://www.runoob.com/css/css-align.html 有错误之处，感谢指出，接收批评

4.9K2 0

CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。...li{ float: left; } .navbar li + li { margin-left: 10px; } 兼容性：IE8+ 通过CSShack可兼容IE6/7 .navbar...0 auto; } 奇技淫招既然replaced element实现宽度自适应居中如此简单，那我们可否以replaced element为容器包裹目标元素呢？...} .navbar li{ float: left; } .navbar li + li { margin-left: 10px; } 虽然采用button作为壳实现水平居中代码简单...在IE下需要通过onmousedown="return false"来清除点击时button整体元素的样式变化。

8.3K8 0

css 使元素居中

css使元素水平居中 1.对于行内元素的水平居中给父元素设置text-align:center 居中显示 2.定宽块状元素水平居中...绝对定位下top left right bottom 都设置0，再margin: auto 就可以将元素垂直水平居中 css垂直居中参考：http://blog.zhourunsheng.com/2012.../03/css-元素垂直居中的-6种方法/ 利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins...#parent {display: table;} #child { display: table-cell; vertical-align: middle; } 低版本 IE fix bug： 1...适用：通用，但在IE版本低于7时不能正常工作，demo 代码： html 1 2 3 Content here </div

3.9K4 0

css文字居中原

1、垂直居中 ?...像上头左边的LNG垂直居中 LNG...dl.informationSpecialHead dt div{padding:5px;display:table-cell;vertical-align:middle;text-align:center;} 2、不确定内容的水平居中...上图假如里面的内容不确定长度，就无法用margin:0 auto,来实现水平居中，需要用下面来实现 <span

4.6K2 0

css垂直居中怎么设置?文字上下居中和图片垂直居中

css 居中分css垂直居中和css水平居中，水平居中平时比较常用，这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中，下面我们就分别来介绍一下。...css文字上下居中：一、单行内容的居中。...IE中不支持等的居中　　要注意的是：1. 使用相对高度定义你的 height 和 line-height；2....不想毁了你的布局的话，overflow: hidden 一定要　　二、多行内容居中，且容器高度可变。...支持所有浏览器　　缺点：容器不能固定高度 css图片垂直居中，我们只需要在CSS样式中加入如下CSS代码：img{ vertical-align:middle;}

10.6K7 0

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

前言无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。...水平居中行内标签水平居中基本实现设置父标签内容居中对齐，然后子标签为行级内容时就可以实现效果。....par{text-align:center;} 块级标签水平居中保证块级，保证有宽高，设置位置关系为左右居中； .sub{margin:0 auto;} .sub{margin-left: auto...;margin-right:auto;} 垂直居中单行文本垂直居中，行高等于高度 .par{ height:40px; line-height:40px} 单行文本和图片垂直居中...，内容整体高度不确定，padding-top=padding-bottom, 容器高度确定，多行文本垂直居中，内容整体高度不确定 //方案一 .par{display:table;} .par

3.5K2 0

ie css hack 整理

IE6 hack 　　_background-color:#CDCDCD; /* ie 6*/ IE7 hack 　　*background-color:#dddd00; /* ie 7*/ IE8 hack...　　background-color:red \0; /* ie 8/9*/ IE9 hack 　　background-color:blue \9\0; 浏览器优先级别:FFIE7IE6,CSS...最新css hack：　　"\9"　例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox. 　　"\0"　IE8识别，IE6、IE7不能. 　　"*"　IE6、...white\9; /* hack for IE6+(IE6 IE7 IE8 IE9 IE10) */ color:yellow\0; /* hack for IE8+(IE8...IE9 IE10)*/ color:orange\9\0; /* hack for IE9+(IE9 IE10)*/ } test { color:red\9\0; /* ie9 *

1.8K10 0

CSS居中：完全指南（译）

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢？但是我认为这个问题其实并没有那么难啦，就是有很多种不同的方式可以达到居中的目的，这取决于不同的情景，很难说用哪一种方式去实现居中。...让一个父元素为块级元素的行内元素水平居中，可以： CSS: 123 .center-children {text-align: center;} 单个块级元素？...在CSS里，垂直居中是有那么一点点麻烦了。...为了让元素在 flexbox 两个方向都居中，你需要两个居中属性： CSS: 12345 .parent {display: flex;justify-content: center;align-items...: center;} 结论你完全可以用CSS来居中元素

2.6K7 0

CSS实现垂直居中布局

垂直居中首先将与的高度设置为100%（为演示父元素不定宽高的效果），并清除的默认样式 html,body{ margin: 0;...height: 100%; } 垂直居中大致分为两类，父元素定宽高与父元素不定宽高，将两类样式以及子容器设定好 .set-parent,.dy-parent{ width...父元素定宽高 position+transform 原理与position+margin相同，CSS3的transform使得div向上平移自身高度的50%。 <!...父元素定宽高 position+calc css3提供calc函数，能够进行动态计算 css

2.6K3 0

CSS实现居中效果

水平居中行内或类行内元素（比如文本和链接）在块级父容器中让行内元素居中，只需使用 text-align: center; This text is centered....请注意，float 属性是不能实现元素居中的。多个块级元素如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。...如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 属性实现垂直居中： I'm vertically centered multiple lines of text in a CSS-created...通过组合水平居中和垂直居中的技巧，可以实现非常完美的居中效果。

5K2 0

CSS居中方法集锦

然后在css-tricks上找了找，瞬间豁然开朗，麻麻再也不用担心我的居中问题啦！看得比较散，稍微整理如下。...于是我们很快想到CSS3的transform。...固然很爽，但有时也不得不兼顾老版本IE的脾气，尽管微软已经开始全面推广spartan，对家里的老爷子也还是要敬三分，不得不保留下来。...这里不得不佩服css-tricks上作者的脑洞，下面是它的方法： ?...可惜的是由于历史版本的原因，各浏览器的写法都有些微差别，IE之流的上古大神更是爱答不理，只得静待新标准的推进了。

9401 0

各种CSS居中方案

页面居中，各种元素居中是我们开发是很常见的情况，下面就来讨论下水平居中，垂直居中以及水平加垂直居中都有哪些常见的方案。...水平居中 text-align + inline-block .parent{ /* text-align会对inline的子级生效，设置为center就会水平居中 */ text-align...display设置为inline-block子级就不会撑满父级，而是自适应内容 */ display: inline-block; /* text-align会继承，child的子级也会水平居中...水平垂直居中直接将前面的水平居中和垂直居中结合起来就行了。...，垂直居中都有absoluate + transform方案，结合起来就可以水平垂直居中了： .parent10 { position: relative; } .child10 {

1.1K5 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭