先看效果

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8"/>
  5. 	<title></title>
  6. 	<style type="text/css">*{font-family: 'Microsoft Yahei';font-size: 14px;}</style>
  7. </head>
  8.  
  9. <body>
  10. <!--单行文字居中-->
  11. <p>1.单行文字居中</p>
  12. <p>缺点：无法实现多行文字居中，适用于小元素如a,button,图标</p>
  13. <style type="text/css">
  14. 	.single-text-center{width: 300px; height: 100px; line-height: 100px; background: #60bcd3; text-align: center;}
  15. </style>
  16. <div class="single-text-center">
  17. 	<div class="text">我希望这段文字居中显示</div>
  18. </div>
  19. <!-- 通过padding实现多行文字垂直居中 -->
  20. <p>2.通过padding实现多行文字垂直居中</p>
  21. <p>缺点：父容器不能固定高度</p>
  22. <style type="text/css">
  23. 	.padding-center-parent{width: 300px; text-align: center; background: #60bcd3;}
  24. 	.padding-center-content{padding: 30px 0;}
  25. </style>
  26. <div class="padding-center-parent">
  27. 	<div class="padding-center-content">5.通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中</div>
  28. </div>
  29. <!--通过position:absolute;margin实现居中-->
  30. <p>3.通过position:absolute;margin实现居中</p>
  31. <p>缺点：宽高被固定死了，不能根据内容而变</p>
  32. <style type="text/css">
  33. 	.position-center-parent{width: 300px; height: 300px; position: relative; background: #60bcd3; }
  34. 	.position-center-content{width: 200px; height: 200px; position: absolute; left: 50%; top:50%; margin-top: -100px; margin-left: -100px; background: #ff6700;}
  35. </style>
  36. <div class="position-center-parent">
  37. 	<div class="position-center-content"></div>
  38. </div>
  39. <!-- 通过浮动实现垂直居中，通过margin实现水平居中 -->
  40. <p>4.通过浮动实现垂直居中，通过margin实现水平居中</p>
  41. <p>缺点：宽高被固定死了，不能根据内容而变</p>
  42. <style type="text/css">
  43. 	.floater-parent{height: 300px; width: 300px; background-color: #60bcd3;}
  44. 	.floater{height: 50%; float: left; margin-bottom:-100px; }
  45. 	.floater-content{height: 200px; width: 200px; margin:0 auto;  clear: both;  background-color: #ff6700;}
  46. </style>
  47. <div class="floater-parent">
  48. <div class="floater"><!--无需内容--></div>
  49. <div class="floater-content"></div>
  50. </div>
  51. <!-- 通过display:table-cell; vertical-align:middle; 实现居中 -->
  52. <p>5.通过display:table-cell; vertical-align:middle; 实现垂直居中，通过定位实现水平居中</p>
  53. <style type="text/css">
  54. 	.table-center-parent{width: 300px; height: 300px; display: table-cell; vertical-align:middle; position: relative; background: #60bcd3;}
  55. 	.table-center-content{width: 200px; position: absolute; left:50%; margin-left: -100px; background: #ff6700; display: inline-block; vertical-align:middle;}
  56. </style>
  57. <div class="table-center-parent">
  58. 	<span class="table-center-content">通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中</span>
  59. </div>
  60.  
  61. </body>
  62. </html>

结论：css我目前还找不到一种解决方法可以实现水平垂直居中的同时，容器宽高又可以自适应内容。css3的flex弹性盒可以实现，但浏览器兼容又是一大硬伤...在这挖个坑，看以后能不能找到办法

各种"居中"的更多相关文章

  1. 关于textview显示特殊符号居中的问题

    话说这是2017年的第一篇博客,也是一篇技术博客.先从简单的一篇解决问题开始吧,千里之行,始于足下! ------------------------------------------------- ...

  2. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  3. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  4. 浏览器的兼容模式下的button中文字垂直方向不居中显示

    <button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. ...

  5. 如何只用CSS做到完全居中

    我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中--直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式, ...

  6. CSS常见居中讨论

    先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .con ...

  7. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

  8. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  9. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  10. 如果layer层在iframe下不居中滚动

    需要在layer前面加上parent.layer. 2.运用layer层的步骤: 1.引入1.8版本以上的jquery文件 <script type="text/javascript& ...

随机推荐

  1. leetcode：Path Sum （路径之和） 【面试算法题】

    题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...

  2. Java集合框架(JCF)之collention

    一.概念:是为了实现某一目的或功能而预先提供的一系列封装好了的具有继承或实现的类与接口. 二.特点: 1.元素的类型可以不同  2.集合长度可变 3.空间不固定 三.collection与collec ...

  3. FTP远程命令集

    使用ftp命令进行远程文件传输 ftp命令是标准的文件传输协议的用户接口.ftp是在TCP/IP网络上的计算机之间传输文件的简单有效的方法.它允许用户传输ASCII文件和二进制文件. 在ftp会话过程 ...

  4. 学习马士兵的struts2/hibernate/spring中遇到的问题及其解决方法

    STRUTS2 1. 写好最简单的hello world项目后,无法通过浏览器访问到hello.jsp页面,提示没有资源. 学习structs2的时间,已经更新到了2.3.16了,structs中的很 ...

  5. C++在堆上申请和释放内存 - new & delete

    // 动态申请内存, 指向一个未初始化的整型 int *pi = new int; // pi指向一个整型值,初始化为0 int *pi = new int(); // value of i is 1 ...

  6. 【MongoDB】mongoimport and mongoexport of data (一)

    In the software development, we usually are faced with a common question of exporting or importing d ...

  7. 几种更新(Update语句)查询的方法

    正 文: 数据库更新就一种方法Update,其标准格式:Update 表名 set 字段=值 where 条件只是依据数据的来源不同,还是有所差别的:  1.从外部输入这样的比較简单例:update ...

  8. Android Activity界面切换添加动画特效（转）

    在Android 2.0之后有了overridePendingTransition() ,其中里面两个参数,一个是前一个activity的退出两一个activity的进入, @Override pub ...

  9. Codeforces #250 (Div. 2) C.The Child and Toy

    之前一直想着建图...遍历 可是推例子都不正确 后来看数据好像看出了点规律 就抱着试一试的心态水了一下 就....过了..... 后来想想我的思路还是对的 先抽象当前仅仅有两个点相连 想要拆分耗费最小 ...

  10. SSD(固态硬盘)简介

    http://www.jinbuguo.com/storage/ssd_intro.html