【总结】我所整理的各种CSS居中

时间：2022-09-21 18:04:12

在网上看了很多文章，自己也总结了一下，虽说是自己写的，但是还是要列出我参考过的那些文章的地址，感谢你们的分享！ 
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 &amp&semi;&amp&semi; CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP &amp&semi;&amp&semi; 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. std&colon;&colon;stringstream

    使用 std::stringstream,小心 内存! 适时 清空 缓冲 …… 2007年12月14日 星期五 : stringstream是个好东西,网上有不少文章,讨论如何用它实现各种数据类型的转 ...

  2. Android Capability 细粒度的权限控制

    1. 传统的UID/GID,权限颗粒度太大 2. Capability: 细粒度的权限控制 3. 进程的Capability 4. 文件的Capability 5. 进程的Capability Bou ...

  3. nsinteger 与 int 区别

    在苹果的api实现中,NSInteger是一个封装,它会识别当前操作系统的位数,自动返回最大的类型.   当你不知道你的操作系统是什么类型的时候,你通常会想要使用NSInteger,所以或许你想要你的 ...

  4. 熬之滴水成石：Spring--精简的J2EE&lpar;7&rpar;

                                              49--持久性 关于持久性在最早的Delphi单元中,就曾介绍过.持久性是数据库中读取,保存,或删除数据的过程.毫无 ...

  5. php专业面试总结

    PHP专业面试题汇总 一.PHP基础: 2 二.数据库部分 5 三.面向对象部分 9 四.ThinkPHP部分 12 五.smarty模板引擎 16 六.二次开发系统(DEDE.ecshop): 18 ...

  6. 九度OJ1000

    题目描述: 求整数a,b的和. 输入: 测试案例有多行,每行为a,b的值. 输出: 输出多行,对应a+b的结果. 样例输入: 1 2 4 5 6 9 样例输出: 3 9 15 代码实现: #inclu ...

  7. 后端分布式系列：分布式存储－HDFS 与 GFS 的设计差异

    「后端分布式系列」前面关于 HDFS 的一些文章介绍了它的整体架构和一些关键部件的设计实现要点. 我们知道 HDFS 最早是根据 GFS(Google File System)的论文概念模型来设计实现 ...

  8. Java进阶篇设计模式之十 ---- 访问者模式和中介者模式

    前言 在上一篇中我们学习了行为型模式的解释器模式(Interpreter Pattern)和迭代器模式(Iterator Pattern).本篇则来学习下行为型模式的两个模式,访问者模式(Visito ...

  9. spring-boot-mail

    1. 功能 发送普通邮件 发送htm邮件 发送带附件的邮件 发送带静态资源的邮件 2. 实现 类结构图 3. 实现 接口 package com.jihite.service; public inte ...

  10. Android之2次打开添加友盟统计代码，后缀会添加广告

    这里首先列明步骤, 做一个标识仅此而已. 1. 首先使用apktool来反编译你待需要加入友盟统计的apk包, 具体如何使用与配置apktool, 请参考我关于apktool配置的文章. 2. 然后自 ...

相关文章