常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可。
主要麻烦的地方还是在垂直居中的处理上,所以接下来主要考虑垂直方向上的居中实现。
水平垂直居中主要包括三类:基本文本类,图像类,其他元素类
但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法。
方法一、使用 line-height
这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
width: 200px;
height: 200px; background: #ddf;
}
.content {
line-height: 200px;
text-align: center;
overflow: hidden;
}
</style> <div class="box">
<div class="content">
This is text
</div>
</div>
单行文字的情况各浏览器都能兼容,多行文字就需要考虑其他方法了。
但如果是图片,IE6以上可以正常居中,以下(包括IE6)则不兼容。
(如果想通过行高让图片在块元素内垂直居中,ie6无效果,因为ie6中含有替换元素的行高会失效。)
二、使用 vertical-align
加上这个属性,不过line-height也不能丢
如果不加上那个line-height的属性的话,div会认为你vertical-align的是默认高度,而不是自定义设置的高度。
.box {
margin: 20px auto;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
line-height: 200px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
跟上述一样,IE6的图片还是有问题
三、把容器当作表格单元
table可以设置vertical-align,自然能实现居中,所以我们可以模拟出一个table
使用display:table和display:table-cell的方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
display: table;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
} </style> <div class="box">
<div class="content">
This is test a b c d e f g h i j k a b c d e f g h i j k
</div>
</div>
多行文本能居中了,但IE6却还是老样子。图片的居中也同理。
四、IE6下的解决方案
IE6这么霸道..不过还是可以 以bug攻bug
在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素
进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的
高度,而从父元素继承来的定位高度)
比如这
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位/相对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进
行相对定位的时候,你使用的100%分比将不再是content原有的高度。
例如,我们设定了subwrap的position为top:40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;
那么,如果我们设定subwrap的top:50%的话,我们必须使用-100%才能使content回到原来的位置上去,但是如果我们把content设置成-50%呢?
那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:
注意,要有三个层级才可以~ 喜欢hack的话就直接兼容进去了
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
position: relative;
margin: 20px auto;
display: table;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
_position: relative;
_top:50%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content > div {
_position: relative;
_top: -50%;
}
</style>
<div class="box">
<div class="content">
<div>This is test a b c d e f g h i j k a b c d e f g h i j k</div>
</div>
</div>
五、负边距margin的使用
这个方法主要用于块的居中,首先绝对定位到50% ,然后通过负边距拉回来(元素高的一半,宽的一半)
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
position: relative;
margin: 20px auto;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
position: absolute;
top:50%;
left: 50%;
margin-left: -60px; /* (width + padding)/2 */
margin-top: -50px; /* (height + padding)/2 */
padding: 10px;
width: 100px;
height: 80px;
background: #abc;
}
</style> <div class="box">
<div class="content">
This is test
</div>
</div>
六、css3中transform的使用
其实这种方式给负边距差不多,原理也是拉回来,不过因为css3的关系,IE8以下(包括IE8)还不支持
使用 transform: translate(-50%,-50%)拉回来
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
position: relative;
margin: 20px auto;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
position: absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
padding: 10px;
width: 100px;
height: 80px;
background: #abc;
}
</style>
七、直接使用margin:auto
使用这个方式需要有一些知识 要了解
绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。
优点: 1.支持跨浏览器,包括IE8-IE10. 2.无需其他特殊标记,CSS代码量少 3.支持百分比%属性值和min-/max-属性 4.只用这一个类可实现任何内容块居中 5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下) 6.内容块可以被重绘。 7.完美支持图片居中。 缺点: 1.必须声明高度(查看可变高度Variable Height)。 2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。 3.在Windows Phone设备上不起作用。 浏览器兼容性: Chrome,Firefox, Safari, Mobile Safari, IE8-10. 绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。 对比表格: 绝对居中法并不是唯一的实现方法,实现垂直居中还有些其他的方法,并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。 解释: 绝对居中(AbsoluteCentering)的工作机理可以阐述如下: 1、在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。
W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0. 2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。 Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space 3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。 Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to). 4、 给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets. 5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。
W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically 这么看来, margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的,所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。 简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中
这样一来,就可以直接居中了,不过IE6还是不能兼容到
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
position: relative;
margin: 20px auto;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 80px;
background: #abc;
}
</style>
<div class="box">
<div class="content">
This is test
</div>
</div>
八、上下padding相等的模拟
一般用于 父元素高度不确定的文本、图片等的垂直居中
.content {
padding-top: 25px;
padding-bottom: 25px;
background: #abc;
text-align: center;
}
<div class="content">
<p>This is test a b c d e f g h i j k a b c d e f g h i j k </p>
</div>
不过块级元素就有点问题了,第二行开始就不会左右居中了
九、使用css3的Flex布局
Flex布局用法见 上文 flex对IE而言 IE10+ 才支持
比如我想让box中那几个div都水平垂直居中,只要简单设置一下即可。
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
padding: 10px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
/* align-content: flex-start; */
align-items: center;
width: 200px;
height: 200px;
background: #ddf;
}
.content {
width: 50px;
height: 50px;
border: 2px solid #adf;
background: #abc;
} </style> <div class="box">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
得到结果为左图,因为默认align-content是stretch已经完全撑开了,如果想得到右图连接在一起就 把上头的 注释取消即可
十、在 content 元素外插入一个 div
并设置此 div height:50%; margin-bottom: -(contentheight + padding)/2;
。
比如content高度为100px,总padding为20px ,则margin-bottom: -60px 将content挤下去
<style type="text/css">
html,body,div {margin: 0;padding: 0}
.box {
margin: 20px auto;
width: 200px;
height: 200px;
background: #ddf;
}
.floater {
height: 50%;
margin-bottom: -60px;
}
.content {
position: relative;
margin: 0 auto;
padding: 10px;
width: 100px;
height: 100px;
border: 2px solid #adf;
background: #abc;
} </style> <div class="box">
<div class="floater"></div>
<div class="content"></div>
</div>
缺点就是增加了无意义的标签,但优点是简便而且IE6也得到兼容
当然,还有很多方法可以实现水平垂直居中,见到了再添加吧。
常见的几种 CSS 水平垂直居中解决办法的更多相关文章
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
- E浏览器常见的9个css Bug以及解决办法
我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下 ...
- 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- Java常见的几种内存溢出及解决方法
Java常见的几种内存溢出及解决方法[情况一]:java.lang.OutOfMemoryError:Javaheapspace:这种是java堆内存不够,一个原因是真不够(如递归的层数太多等),另一 ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS 水平垂直居中的几种实现方法
前言 项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style> ...
随机推荐
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
- ubuntu下安装Node.js(源码安装)
最近使用hexo的过程中出现了问题,中间载nodejs安装的时候也耽误了些许时间,所以在此记录一下安装的过程. 环境:ubuntu14.0.4LTS,安装nodejs版本node-v0.10.36.t ...
- Crystal Reports 支持的纸张种类
DefaultPaperSize Paper10x14 254 x 355.6 mm Paper11x17 279.4 x 431.8 mm PaperA3 A3 ?,297 x 420 mm Pap ...
- TSPL学习笔记(3):排序算法练习
快速排序 快排的详细介绍见,简单的说就是取输入序列中的首元素m,然后将除首元素m以外的其它元素分成两组,小于等于m的一组和大于m的一组.将3组元素组合成输入队列:小于等于m + m + 大于m. 下面 ...
- Visual Studio 2015 开发大量 JavaScript 代码项目程序崩溃的解决方案
最近公司做新项目,基于 Bootstrap.AngularJS 和 kendo 开发一套后台的管理系统,在项目中使用了大量的 JavaScript 文件,这两天 Visual Studio 2015 ...
- 【经验谈】XmlSerializer的坑
XmlSerializer我想现在用的人可能不多了,大家都在用Json.我现在所在的公司依然在用,所以发现了这个坑.当然这个坑存在很久了只是没用过所以才发现. 事情是这样的,测试那边说系统偶尔会报找不 ...
- 用手机地图GPS导航费流量吗?
如果你的手机带有GPS芯片,那么使用手机导航是不会耗费手机流量的.但是如果你的手机没有GPS芯片,而使用的导航软件又是类似于移动提供的导航服务那样的导航功能,那就耗费手机流量了. 目前,导航软件导航主 ...
- C#的设计模式分为3大类23种
创建型: 1. 单件模式(Singleton Pattern) 2. 抽象工厂(Abstract Factory) 3. 建造者模式(Builder) 4. 工厂方法模式(Factory Method ...
- CSDN 2013年度博客之星评选——分享几张厦门杭州的美图
亲爱的小伙伴们,作者在6号至20号,一直在休假中,出去也没带电脑,今天回家意外的发现自己有幸成为“CSDN 2013年度博客之星评选”的候选人,在此也谢谢各位小伙伴们的支持,谢谢CSDN的鼓励.我的投 ...
- FLEX自定义事件
有时候我们需要让两个组件之间实现联动,并且在其中传递数据,自定义事件机制可以帮助我们比较优雅的实现这种需要. 下面的例子,是打算实现一个列表和一个编辑框的联动. 编辑框代码 <?xml vers ...