css中关于居中的那点事儿

　　关于居中，无论是水平居中，还是垂直居中都有很多方式，下面我来介绍一些常用的。

第一部分：水平居中

　　1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		div{text-align: center;}
  8. 		img{width: 200px;height: 200px;border: thin solid red;}
  9. 	</style>
  10. </head>
  11. <body>
  12. 	<div>
  13. 		<img src="pic.png">
  14. 	</div>
  15. </body>
  16. </html>

　注意：对于某个块元素的居中，不能在其父元素的样式中设置text-align:center，这是无效的。下面介绍块元素的居中方式。

2.实现块级元素的水平居中。

　　方法一：设置其左右两边的外补丁为auto。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		div{width: 200px;height: 100px;background: red;margin:0 auto;}
  8. 	</style>
  9. </head>
  10. <body>
  11. 		<div>this is a div</div>
  12. </body>
  13. </html>

　　注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且div中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个div中的另一个div希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。

方法二：使用绝对定位和负边距。

　　代码如下所示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
  9.         #son{
  10.             width: 100px;height: 100px;background: #aaa;text-align: center;
  11.             position: absolute; left: 50%; margin-left: -50px;
    　          /*注意：因为绝对定位是left的值是相对于son的最左边为50%，所以需要使用margin-left再向左偏移宽度的一半  */

  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="parent">
  17.         <div id="son">faas</div>
  18.     </div>
  19. </body>
  20. </html>

　　效果图如下：

　　

第二部分：垂直居中

　　1.行内元素的垂直居中

　　　A　我们在写导航菜单时，往往采用将<a>标签写入float的<li>中，且为了美观，我们常常需要将a标签中的内容水平居中和垂直居中。水平居中我们在上面已经介绍了，通过在字体的父元素内设置text-align:center;即可实现。那么垂直居中呢？对于文字而言，我们只需要将行高设置为字体所在块元素的高度即可。

　　　　html代码如下：

  1. <body>
  2.     <ul>
  3.         <li><a href="">我</a></li>
  4.         <li><a href="">是</a></li>
  5.         <li><a href="">导</a></li>
  6.         <li><a href="">航</a></li>
  7.         <li><a href="">的</a></li>
  8.     </ul>
  9. </body>

　　     css代码如下：

  1.     <style>
  2.         *{padding: 0;margin: 0;list-style: none;text-decoration: none;}
  3.         ul li{float: left;/*width: 40px;height: 40px;*/}
  4.         a{display: block;width: 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
  5.     </style>

　　 我把a标签的display属性值修改为了block，所以我们就可以修改a标签的宽度和高度了，因为li是包含a的，li会由其中的内容（即a标签）撑开，所以在li中的width和height是不需要设置的。

　　 因为a成为了块级元素，所以水平居中只需要在a中添加text-decoration:none;即可。将line-height的高度和height的高度设置为相同的，就可以实现垂直居中了。

B 如果要对a标签中的字体居中，实际上还有一种更为简单的方法。

　　即将a的display属性设置位block之后，不设置其宽度和高度（li的宽度和高度也不设置），为了看清楚，我们可以给a加border，这时得到的效果图如下：

　　即a的大小完全是由字体撑开的，这时我们可以通过设置上下左右的padding值达到与A方法相同的效果。html代码与A中相同，css代码如下：

  1.         *{padding: 0;margin: 0;list-style: none;text-decoration: none;}
  2.         ul li{float: left;}
  3.         a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}

　　大家可以看到，这里我只设置了上下padding值为10px，左右padding值为30px;在A中的width height text-align(实现水平居中) line-height(实现竖直居中)这些属性全都没有设置，只使用了padding:10px 30px;来代替，所以这种方法是值得推荐的。

　　效果图如下：

C 另外一种方法也可以实现行内元素的垂直居中。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div id="parent">
  13.         <span>faas</span>
  14.     </div>
  15. </body>
  16. </html>

　　即我们将id为parent的div元素的display属性值设置位table-cell，这时，即让标签元素以表格单元格的形式呈现，类似于td标签。这时就可以通过设置vertical-align来实现垂直居中了。但值得注意的是：table-cell会被其他一些css属性破坏，比如float和position:absolute等等。且一旦设置位table-cell，这时margin就不能用了。这种方法也可以用于块级元素的垂直居中。

　　2.块级元素的垂直居中。

　　　方法一：使用绝对定位和负边距。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
  9.         #son{
  10.             width: 100px;height: 100px;background: #aaa;text-align: center;
  11.             position: absolute;top: 50%;margin-top: -50px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="parent">
  17.         <div id="son">faas</div>
  18.     </div>
  19. </body>
  20. </html>

　　　方法二：使用display：table-cell;方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc;  display:table-cell; vertical-align: middle;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div id="parent">
  13.         <div>faas</div>
  14.     </div>
  15. </body>
  16. </html>

　　大家可以看出，这个方法与行内元素的垂直居中并没有什么区别。

　　

　　方法三：使用display:flex;代码如下：

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
  9.                display: flex; align-items:center; }
  10.         #parent>div{background: red;width: 100px;height: 100px;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="parent">
  15.         <div>faas</div>
  16.     </div>
  17. </body>
  18. </html>

　　

　　在父元素中添加display:flex;align-items:center;即可实现竖直居中。

　　3.使用line-height居中。

　　即给父元素（块级元素）设置height和line-height相等，然后给子元素（inline-block 或者 inline元素) 设置vertical-align:middle即可，如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>forMiddle</title>
  5.     <style>
  6.         div{
  7.             width: 500px;
  8.             height: 500px;
  9.             line-height: 500px;
  10.             background-color: #ddd;
  11.         }
  12.         a{
  13.             vertical-align: middle;
  14.             color:red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>
  20.         <a href="">居中</a>
  21.     </div>
  22. </body>
  23. </html>

　　又如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>forMiddle</title>
  5.     <style>
  6.         div{
  7.             width: 500px;
  8.             height: 500px;
  9.             line-height: 500px;
  10.             background-color: #ddd;
  11.         }
  12.         img{
  13.             vertical-align: middle;
  14.             color:red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>
  20.         <img src="http://p0.so.qhmsg.com/bdr/_240_/t018cfb77d38a88e67f.jpg" alt="">
  21.     </div>
  22. </body>
  23. </html>

　　这种方式是非常值得学习了。

第三部分：水平竖直同时居中

　　　　方法一：使用绝对定位和负边距

　　　　代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
  9.         #son{
  10.             width: 100px;height: 100px;background: #aaa;text-align: center;
  11.             position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div id="parent">
  17.         <div id="son">faas</div>
  18.     </div>
  19. </body>
  20. </html>

　　效果如下：

　　　　方法二：使用display：flex。

　　　　代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
  9.                display: flex; align-items:center;  justify-content:center;}
  10.         #parent>div{background: red;width: 100px;height: 100px;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="parent">
  15.         <div>faas</div>
  16.     </div>
  17. </body>
  18. </html>

　　即只需要在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。

　　

　　方法三：同样使用display:flex.

　　代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{margin:0;padding: 0;}
  8.         #parent{width: 500px;height: 300px;background: #ccc; margin:0 auto;
  9.                display: flex; }
  10.         #parent>div{background: red;width: 100px;height: 100px; margin: auto;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div id="parent">
  15.         <div>faas</div>
  16.     </div>
  17. </body>
  18. </html>

　　我们发现只需要在父元素中设置display:flex;在子元素中设置margin：auto；即可实现居中，这种方法无疑是最简单的。

　　

　　

css中关于居中的那点事儿的更多相关文章

  1. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  2. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  3. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  4. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

  5. css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...

  6. CSS中各种居中的问题

    1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...

  7. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  8. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  9. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

随机推荐

  1. js前端分页

    转载:http://www.cnblogs.com/lyzg/p/5791011.html http://www.cnblogs.com/m-m-g-y0416/p/5601903.html

  2. 51单片机中断interrupt……using……

    51单片机中断细节的一些问题. interrupt0:外部中断0interrupt1:定时器中断0interrupt2:外部中断interrupt3:定时器中断1interrupt4:串口 using ...

  3. xshell4|5远程连接工具

    志同道合,方能谈天说地! 对比其他的工具,对于功能来说xshell是比较厉害的.有能力的可以支持正版! Xshell4 链接: http://pan.baidu.com/s/1jHAgboa 密码: ...

  4. android 发送GET请求 服务端接收乱码的问题

    在android的编程中常会使用get/post请求,在用get请求的时候数据是直接放在url当中的 例如: http://apicloud.mob.com/v1/weather/query?key= ...

  5. URL（待整合到HTTP书中哦）

    一:scheme://host.domain:port/path/filename scheme - 定义因特网服务的类型.最常见的类型是 http host - 定义域主机(http 的默认主机是 ...

  6. Mybatis学习--Mapper.xml映射文件

    简介 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 映射文件中有很多属性,常用的就是parameterType(输入类型 ...

  7. [转]Oracle中使用Rownum分页详细例子

    原文地址:http://www.jb51.net/article/52272.htm 在MySQL中,我们通常都使用limit来完成数据集获取的分页操作,而在Oracle数据库中,并没有类似limit ...

  8. [转]关于jquery中html()、text()、val()的区别

    原文地址:http://www.cnblogs.com/xiaolifeidao/p/3715830.html .html()用为读取和修改元素的HTML标签    对应js中的innerHTML . ...

  9. wow.js使用方法

    近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结: wow.js演示地址 wow.js的github地址 使用方法真是超简 ...

  10. bash中不可以用字符串做数组下标

    bash中可以用字符串做数组下标吗例如 test["abc"]=1------解决方案-------------------- 好像是误会,是awk里可以,bash shell里不 ...