在网上看了很多文章，自己也总结了一下，虽说是自己写的，但是还是要列出我参考过的那些文章的地址，感谢你们的分享！ 
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居中的更多相关文章

  1. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

  2. 【基础】这15种CSS居中的方式，你都用过哪几种？

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

  3. 第212天：15种CSS居中的方式，最全了

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  6. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  7. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  8. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  9. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

随机推荐

  1. css盒子模型层级3D图

    作为前端开发工程师,大家都应该知道盒子模型.下面用一张图来表达3D盒子模型的层级关系 大家可以看到background-color 在background-image的下一层.这个希望对大家有帮助

  2. hdu 1036 (I/O routines, fgets, sscanf, %02d, rounding, atoi, strtol) 分类： hdoj 2015-06-16 19:37 32人阅读 评论(0) 收藏

    thanks to http://stackoverflow.com/questions/2144459/using-scanf-to-accept-user-input and http://sta ...

  3. java 深度探险 java 泛型

    Java泛型(generics)是JDK 5中引入的一个新特性,允许在定义类和接口的时候使用类型参数(type parameter).声明的类型参数在使用时用具体的类型来替换.泛型最主要的应用是在JD ...

  4. JEECMS v8 发布，java 开源 CMS 系统

    JEECMSv8 是国内java开源CMS行业知名度最高.用户量最大的站群管理系统,支持栏目模型.内容模型交叉自定义.以及具备支付和财务结算的内容电商为一体:  对于不懂技术的用户来说,只要通过后台的 ...

  5. asp.net导出word（word2007）

    1.只能导出成word2007格式(.docx),可直接导出到客户端 2.服务器上不需要装任何东西,也没有权限限制,比较适合导出表格(支持图片) 3.需要一个国外的DocX.dll插件 4.需要添加引 ...

  6. 【php常用】常用函数啥的

    1.intval()  把变量转换成整数类型 2.trim() 去除字符串两边空格or 加上参数是去除该参数 3.array_values()  函数返回一个包含给定数组中所有键值的数组,但不保留键名 ...

  7. java.lang.ClassNotFoundException: com.*.listener.ConfigInfoReader

    包的问题,删除掉了buildPath的包,再加上一个需要用的,问题搞定...不知道是为什么

  8. [蟒蛇菜谱] Python方便使用的级联进度信息

    class StepedProgress: '''方便显示进度的级联进度信息. ''' def __init__(self, stockPercent=[1], parentProgress=None ...

  9. 高通CP Crash分析调试

    1. 转换tlcore文件 获取 EBICS0.BIN tl2elf --qconly tlcore 2.使用T32 命令把Riva的dump信息从EBICS0文件分离出来 data.load.BIN ...

  10. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...