【总结】我所整理的各种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的居中,首先必 ...
随机推荐
- LinkedList其实就那么一回事儿之源码分析
上篇文章<ArrayList其实就那么一回儿事儿之源码分析>,给大家谈了ArrayList, 那么本次,就给大家一起看看同为List 家族的LinkedList. 下面就直接看源码吧: p ...
- Objective－C（ Category 分类，非正式协议,分类延展）
分类: 主要是给原来类增加一些方法;不可以增加成员变量 Person (Person+eat) 非正式协议: 非正式协议就是类别,即凡是NSObject或其子类Foundation框架中的类增加的类别 ...
- react native ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...
- Java：多线程<二> 同步
由于多线程的访问出现延迟和线程的随机性,在使用多线程时往往会伴随安全性的问题,这些问题一旦出现将会是非常严重的.为了解决这种安全性问题,synchronized出现了. synchronized用法一 ...
- Git切换分支出现提示'SSL端口：44301'及解决方案
切换分支出现如下提示,并且自动签出了项目文件csproj. 修改项目文件csproj 修改前: <UseIISExpress>true</UseIISExpress> < ...
- mybatis.net insert 返回主键
mybatis insert语句 <insert id="Add" parameterClass="UserInfo" resultClass=" ...
- 快消零售行业怎么用K2做开关店管理？
提起迪卡侬,想到的便是它汇聚所有运动于同一个屋檐下的盛况.从来没有一家体育用品零售店可以像迪卡侬一样,涵盖几乎所有级别的运动产品.从入门级到最专业的运动产品,应有尽有,不仅产品质量有保证,价格也平易近 ...
- Linux(Ubuntu) 和 Python 常用命令
Linux: pwd: check current directory touch f1 f2 f3: create three empty files tree dir/: show the lev ...
- iOS 视频直播
ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...
- android recyclerview 更新ui
http://blog.csdn.net/leejizhou/article/details/51179233