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

    在软件默认设置下,logcat的缓存为1024,即logcat显示的条数有限,给程序的调试带来很大的不便,通过设置 logcat缓存的大小,可以增加logcat显示的条数,将程序调试的输出都可以打印出 ...

  2. Java MVC Controller 中通过不同方式获取 @PathVariable 参数值

    1.最常用,也是最直接使用方法,通过@PathVariable注解获取 @RequestMapping(value = "/test/{a}") public @ResponseB ...

  3. android 缓存Bitmap 使用内存缓存

    private LruCache<String, Bitmap> mMemoryCache; /** * 判断内存大小 设置位图的缓存空间 */ private void judgeMem ...

  4. Jmeter—8 连接microsoft sql server数据库取数据

    本文以Jmeter 连接microsoft sql server为例. 1 从微软官网下载Microsoft SQL Server JDBC Driver 地址:http://www.microsof ...

  5. struts2 标签 和 c标签的页面数据显示

    用struts2 标签显示的页面代码 <s:if test="#request.employees == null || #request.employees.size() == 0& ...

  6. C#—WebService

    一.qq是否在线 1.添加Web引用    qqOnlineWebService cn.com.webxml.www.qqOnlineWebService shelly1 = new NIIT1109 ...

  7. Cfree

    #include<stdio.h>int main(){ printf("Hello World!!!/n"); return 0;} #include<stdi ...

  8. 黑马程序员：Java编程_泛型

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 没有使用泛型时,只要是对象,不管是什么类型的对象,都可以存储进同一个集合中.使用 ...

  9. 深入解析Javascript闭包

    首先给个例子: function PfnOuter(){ var num=999; function PfnInner(){ alert(num); } return PfnInner; } var ...

  10. id 和 instancetype

    静态数据类型 默认情况下所有的数据类型都是静态数据类型 静态数据类型的特点: 1 在编译时就知道变量的类型 2 知道变量中有哪些属性和方法 3 在编译的时候就可以访问这些属性和方法 4 并且如果是通过 ...