在网上看了很多文章，自己也总结了一下，虽说是自己写的，但是还是要列出我参考过的那些文章的地址，感谢你们的分享！ 
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. 樱花漫地集于我心，蝶舞纷飞祈愿相随 训练：a preparation 训练：a preparation

    知识点:                                                                                               分 ...

  2. 使用Git进行代码管理的心得

    使用GitHub进行代码托管的方法 我是直接下载 Github for Windows ,这个软件自带一个 Github 客户端 和一个 Git shell,其中Github是图形化界面,对初学者来说 ...

  3. java_easyui体系之DataGrid（2）[转]

    一:简介 在1的基础上添加layout组件.实现通过条件动态的从后台查询数据到前台展示.使用的方式是将查询单独作为一个layout中的一个面板. 二:关键之处 1.效果图: 2.左侧的折叠组件: 折叠 ...

  4. Server.UrlEncode()方法 空格转换成了+而非%20

    在ASP.NET MVC 的Control类里提供了该方法.该方法可以很方便的对字符串进行url编码,但小猪今天却发现其将空格编码后变成了“+”而非JavaScript采用的encodeURIComp ...

  5. mac 下安装jmeter

    1.http://jmeter.apache.org/download_jmeter.cgi 下载jmeter 2.解压包 3.进入解压目录/bin/ 4.sh jmeter

  6. docker 会这些也够

    $ sudo systemctl start docker $ sudo systemctl stop docker $ sudo systemctl restart docker If you wa ...

  7. C语言基础--进制

    进制表示: // 1.默认就是10进制 ; // 2.在前面加上一个0就代表八进制 ; // %d是以十进制的方式输出一个整数 printf("%d\n", num1); // % ...

  8. const 放在函数后

    const 放在函数后表示这个函数是常成员函数, 常成员函数是不能改变成员变量值的函数.const 限定符,它把一个对象转换成一个常量.举例:为了使成员函数的意义更加清楚,我们可在不改变对象的成员函数 ...

  9. 立即调用的函数表达式IIFE

    1.写法 (function () { alert("IIFE");})();//或者(function () { alert("IIFE"); }());

  10. OC 解决NSArray、NSDictionary直接打印中文出现乱码的问题

    在iOS开发中,经常需要查看数组中得元素是否是自己想要的,但是苹果并没有对直接打印数组中得中文作处理,直接打印就会出现一堆很讨厌的东西,解决其实很简单,就是需要通过为NSArray添加分类,重写 - ...