【总结】我所整理的各种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的居中,首先必 ...
随机推荐
- Android开发--ImageView的应用
1.简介 当要在屏幕上显示图片时,ImageView用于创建显示图片所需的对象.另外,通过设置ImageView可以改变图片的有关属性. 2.构建 使用Images & Media中的部件来实 ...
- contextloaderlistener
http://blog.csdn.net/c5153000/article/details/6234207 作用:在启动Web容器时,自动装配Spring applicationContext.xml ...
- 【源码】c#编写的安卓客户端与Windows服务器程序进行网络通信
NetworkComms网络通信框架序言 用c#开发安卓程序 (xamarin.android)系列之三 源码(包含客户端与服务器端所有工程文件) 数据库文件 为了方便您测试,我临时搭建了一个服 ...
- movebase导航
利用turtlebot 的导航配置文件 由于movbase发的速度太不友好了所以使用了ros自带的滤波安装相应的包 apt-get install ros-indigo-yocs-velocity-s ...
- 一步步调试解决iOS内存泄漏
虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是可能存在.所以了解原理很重要. 这里讲述在没有ARC的情况下,如何使用Instruments来查找程序中的内存泄 ...
- 绑定hosts
测试过程中需绑定hosts.将测试环境IP绑定域名,输入域名即可连接到测试环境. 1 hosts文件地址:C:\WINDOWS\system32\drivers\etc 2 用记事本打开hosts ...
- Android常见控件— — —ProgressBar
ProgressBar用于在界面上显示一个进度条,表示我们的程序正在加载一些数据. <?xml version="1.0" encoding="utf-8" ...
- follow me learning sqlserver transql
create DATABASE 教务管理系统on (name=教务管理系统_data,filename='E:\sql\教务管理系统_data.mdf ',size=5mb,maxsize=20mb ...
- Linux type命令
用途说明 type命令用来显示指定命令的类型.一个命令的类型可以是如下几种: alias 别名 keyword 关键字,Shell保留字 function 函数,Shell函数 builtin 内建命 ...
- js 上传文件预览
1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...