【总结】我所整理的各种CSS居中
在网上看了很多文章，自己也总结了一下，虽说是自己写的，但是还是要列出我参考过的那些文章的地址，感谢你们的分享！
http://blog.gejiawen.com/2015/03/13/css-layout-horizontal-and-vertical-for-elements/
http://www.cnblogs.com/chenmuyue/archive/2013/05/02/3042984.html
http://blog.csdn.net/yanglang1987500/article/details/42420621
水平居中
· 行内元素（文本、图片）
给其父元素设置text-align:center，里面的内容如果是<img>图片也可以起到效果，同时也可以给img设置宽度
<style>
#father{
width: 600px;
height: 600px;
text-align:center;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="father">
<img src="1.jpg">
</div>
· 块元素
块元素比如div，有2种情况，一种可以设置宽高，另外一种是不可以的
（1）可以设置宽高的
方法一：最常用的利用margin: 0 auto;，就不写代码了；
方法二：子级元素postion:absolute;，然后left:50%,再margin-left:取宽度的一半再负数；这个方法同样适合高度上面的垂直居中，而且没有兼容性的问题，ie5都能用！！！
<style>
#father{
width: 600px;
height: 600px;
background: deepskyblue;
position: relative;
}
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 50%; //先要left取整个宽度一半的值
margin-left: -50px; //取了宽度负数的一半
}
</style>
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
方法三：利用postion:absolute;，然后left:0,再right:0，最后margin:auto；这个方法同样适合高度上面的垂直居中，再加上top:0;bottom:0即可，但是有兼容问题，ie6和ie7不兼容！！！
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0; //如果是水平居中，那就左右都设置为0
margin: auto; //相当于四个方向都是margin:auto
}
方法四：利用css3的transform:translate(-50%,-50%)，translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。这个方法同样适用于图片，也适用于垂直居中！！！还有，这个方法同样适用于宽高不设置的情况，然而，因为是css3，ie8和以下都不支持！！！
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
transform: translate(-50%,-50%); //注意这里的写法
left: 50%;
top: 50%;
}
（2）宽高不固定的情况
方法一：用到table标签进行包装，这个办法就不贴代码了，因为会产生很多冗余代码一般不会这种用。
方法二：把块元素设置display:inline-block；再父级元素text-align:center即可，代码也不贴了，和内联元素一样，缺点在于会改变块元素本身的属性，都不能设置宽高了。
方法三：父级元素设置padding只要左右方向是设置成一样，子级的块元素就能居中，因为子级是块元素，默认占满整行，而父级元素有了左右相等的padding后，两边留的空间就是一样的，自然就水平居中了。
<style>
#father {
padding:10px 150px; //这个父级的padding左右都是留了150px，它的块元素子级撑满整行时自然就两边对齐了
border:1px solid #333;
width: 500px;
height: 500px;
}
#son { //子级不用设置宽，就能居中
background-color:#ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我要居中</div>
</div>
</body>
垂直居中
· 行内元素
单行文本
把父级line-height设置成和heigh一样
<style>
#father{
width: 600px;
height: 600px;
line-height: 600px; //把line-height设置成和height一样
background: deepskyblue;
}
</style>
</head>
<body>
<div id="father">
我要居中
</div>
· 块元素
方法一：多行文本，块元素以及图片
父级元素设置display: table-cell以及vertical-align: middle; 其中id为son的div改成一张图片，也能实现效果
缺点：只兼容ie8以上浏览器
<style>
#father{
width: 400px;
height: 400px;
text-align:center;
background: deepskyblue;
display: table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align: middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div id="father">
<div id="son">
我要垂直居中<br>
我要垂直居中<br>
</div>
</div>
</body>
方法二：图片外面没有包div的垂直居中
仍然用到父级元素line-height设置成和height一样，但是要将img设置vertical-align: middle;
要注意这个方法对div块元素无效，即使设置了宽高也不行。
缺点：ie6不支持，但是ie7支持
<style>
#father{
width: 400px;
height: 400px;
line-height: 400px;
background: deepskyblue;
}
img{
vertical-align: middle; //将img设置vertical-align: middle;
}
</style>
</head>
<body>
<div id="father">
<img src="1.jpg" />
</div>
</body>
方法三：利用display:table-cell以及vertical-align:center
把子级id为son的div改成图片也是可以实现
缺点：ie6,7不支持，而且还改变了元素本身的display属性
<style>
#father{
width: 400px;
height: 400px;
background: deepskyblue;
display: table-cell;
vertical-align: middle; //将img设置vertical-align: middle;
}
#son{
background: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
我要垂直居中<br>
我要垂直居中<br>
</div>
</div>
</body>
总结
列一下比较好用的方法吧：
1）父级postion:relative，子级postion:absolute之后，宽高50%，然后设置margin为元素宽高一半的负值；这个方法没有兼容性问题！缺点在于需要定div的宽高！
2）父级postion:relative，子级postion:absolute之后，上下左右全部为0，margin:auto；缺点也是一定需要定div的宽高，而且ie6,7不兼容！！
3）父级postion:relative，子级postion:absolute之后，top和left为50%，子级加入transform: translate(-50%,-50%); 这个方法在div不设置宽高时也能使用，但是缺点在于transform是css3的样式，ie8以及以下就不兼容了
4) 还是写一段js为了做一个元素可以随着窗口的大小的改变一直处于window中央吧，让js去计算元素的长宽。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('son');
toCenter();
window.onresize = function(){ //onresize是window的事件
toCenter();
};
function toCenter(){ //可视区-元素宽度再除以2就是元素的left值
oDiv.style.left = (document.documentElement.clientWidth - oDiv.offsetWidth)/2 + 'px';
oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + 'px';
}
};
</script>
【总结】我所整理的各种CSS居中的更多相关文章
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
- 【基础】这15种CSS居中的方式，你都用过哪几种？
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 第212天：15种CSS居中的方式，最全了
CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
随机推荐
- 读javascript高级程序设计16-几条函数小技巧
内容概要 作用域安全的构造函数 惰性载入函数 函数绑定 函数节流 一.作用域安全的构造函数 我们知道,当使用new操作符调用构造函数时,构造函数内部的this会指向新创建对象的实例. function ...
- RHCE 系列（一）：如何设置和测试静态网络路由
RHCE(Red Hat Certified Engineer,红帽认证工程师)是红帽公司的一个认证,红帽向企业社区贡献开源操作系统和软件,同时它还给公司提供训练.支持和咨询服务. 这个 RHCE 是 ...
- 2D 《触不可及》
这是一个有着特殊意义的夜晚(2014.9.19),孙红雷的电影这场电影<触不可及>也有着不一般的涵义,于我,在万达商场,遂留此一笔,仅供回忆.
- My Game --线段数据
在背景中用到了一个自定义的类 VectArr : class VectArr { public: VectArr( const Bezier & bz, int conut = 30 ) : ...
- 黑马程序员——OC语言Foundation框架 NSArray NSSet NSDictionary\NSMutableDictionary
Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一) NSNumber 将各种基本数据类型包装成NSNumber对象 @ ...
- realestate.cei.gov.cn
using AnfleCrawler.Common; using System; using System.Collections.Concurrent; using System.Collectio ...
- IIS 工作原理之非托管代码旅程（一）
IIS6改变 IIS6可以为每个不同的虚拟目录创建不同的程序池,这样缩小了IIS的Application Pool的颗粒度,不同的虚拟目录之间是互不影响的. IIS6(和IIS7经典模式)与IIS7集 ...
- C#实现右下角弹出窗口效果
/// <summary> /// 窗体动画函数 注意:要引用System.Runtime.InteropServices; /// </summary> /// <pa ...
- hadoop map-red的执行过程
hadoop的 map-red就是一个并行计算平台,我们在使用这个平台的时候,要做的事情就是提交自己定制的任务(job,主要定制map类,reduce类,combine类等类),然后设置job的各种参 ...
- marquee|各种文字滚动代码(适用公告)
marquee|各种文字滚动代码(适用公告)