【总结】我所整理的各种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的居中,首先必 ...
随机推荐
- rabbitMQ Connection timed out
在VM中部署了一个rabbitMQ server ,在物理机上按照rabbitMQ官网上的 java的教程访问VM中的rabbitMQ报如下错误: Exception in thread " ...
- 【C++】rand()函数，时间种子
srand((unsigned)time(NULL)); //以时间为随机种子,写在循环前才有效(几个循环无所谓) ;i<=size;i++) { ;j<=size;j++) { ==ra ...
- 模拟系列（一）——数字电路
要求 简要模拟数字电路的运行过程,及电位(简化为L和H),用C# WinForm实现. 思路 逻辑部分 电路是一种图结构,基于C#的特性,设计Node类(结点)和Wire类(连线),且为泛型. 由于电 ...
- 0525Scram项目6.0
一.任务完成情况: 主界面基本完成,虽然界面看起来不是很美观,也比较简洁,但是这是我们一起商讨,各自找素材,找图片.还有一些动态的! 燃尽图: 二.界面演示: 三. 任务看板: 四.Spring1回顾 ...
- 什么是 jsonp ？
浏览器不支持Ajax跨域请求 但能加载任何地方的外部js文件 jsonp就是借用这个特点 通过引入文件拿到想要的数据 而不是通过AJAX请求 假如你想获取 vcico.com 的 $data ...
- 一台服务器发布多个tomcat并注册服务名办法
修改服务名称 打开Tomcat7.0.65_1/bin/service.bat 修改注册服务名称 当然这个名字自己改 比如Tomcat7_2 原始文件: set SERVICE_NAME=Tom ...
- Service中事务不能回滚的解决方式（转）
1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的 默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚. spr ...
- [转]Centos 6.5 安装 Scrapy 0.22.2成功
0. python -V (此时显示为2.6.6) 1. yum -y update 2. yum groupinstall -y development 3. yum ...
- 18、（番外）匿名方法+lambda表达式
概念了解: 1.什么是匿名委托(匿名方法的简单介绍.为什么要用匿名方法) 2.匿名方法的[拉姆达表达式]方法定义 3.匿名方法的调用(匿名方法的参数传递.使用过程中需要注意什么) 什么是匿名方法? 匿 ...
- 1、JS的数据类型
一.分类:JS有6种数据类型: 1.string 2.undefined 3.number 4.null 5.boolean 6.object(包含函数.数组.日期等) 二.隐式转换 1.+和- va ...