先看效果

代码：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8"/>

	<title></title>

	<style type="text/css">*{font-family: 'Microsoft Yahei';font-size: 14px;}</style>

</head>

<body>

<!--单行文字居中-->

<p>1.单行文字居中</p>

<p>缺点：无法实现多行文字居中，适用于小元素如a,button,图标</p>

<style type="text/css">

	.single-text-center{width: 300px; height: 100px; line-height: 100px; background: #60bcd3; text-align: center;}

</style>

<div class="single-text-center">

	<div class="text">我希望这段文字居中显示</div>

</div>

<!-- 通过padding实现多行文字垂直居中 -->

<p>2.通过padding实现多行文字垂直居中</p>

<p>缺点：父容器不能固定高度</p>

<style type="text/css">

	.padding-center-parent{width: 300px; text-align: center; background: #60bcd3;}

	.padding-center-content{padding: 30px 0;}

</style>

<div class="padding-center-parent">

	<div class="padding-center-content">5.通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中</div>

</div>

<!--通过position:absolute;margin实现居中-->

<p>3.通过position:absolute;margin实现居中</p>

<p>缺点：宽高被固定死了，不能根据内容而变</p>

<style type="text/css">

	.position-center-parent{width: 300px; height: 300px; position: relative; background: #60bcd3; }

	.position-center-content{width: 200px; height: 200px; position: absolute; left: 50%; top:50%; margin-top: -100px; margin-left: -100px; background: #ff6700;}

</style>

<div class="position-center-parent">

	<div class="position-center-content"></div>

</div>

<!-- 通过浮动实现垂直居中，通过margin实现水平居中 -->

<p>4.通过浮动实现垂直居中，通过margin实现水平居中</p>

<p>缺点：宽高被固定死了，不能根据内容而变</p>

<style type="text/css">

	.floater-parent{height: 300px; width: 300px; background-color: #60bcd3;}

	.floater{height: 50%; float: left; margin-bottom:-100px; }

	.floater-content{height: 200px; width: 200px; margin:0 auto;  clear: both;  background-color: #ff6700;}

</style>

<div class="floater-parent">

<div class="floater"><!--无需内容--></div>

<div class="floater-content"></div>

</div>

<!-- 通过display:table-cell; vertical-align:middle; 实现居中 -->

<p>5.通过display:table-cell; vertical-align:middle; 实现垂直居中，通过定位实现水平居中</p>

<style type="text/css">

	.table-center-parent{width: 300px; height: 300px; display: table-cell; vertical-align:middle; position: relative; background: #60bcd3;}

	.table-center-content{width: 200px; position: absolute; left:50%; margin-left: -100px; background: #ff6700; display: inline-block; vertical-align:middle;}

</style>

<div class="table-center-parent">

	<span class="table-center-content">通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中</span>

</div>

</body>

</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. Classifier4J的中文支持

    Classifier4J是一个轻量级的分类工具,支持贝叶斯分类.向量空间模型.信息摘要等.然而它却不支持中文,异常信息大致如下: Exception in thread "main" ...

  2. jquery实现的个性网站首页 详细信息

    http://download.csdn.net/detail/a757956132/9305419 实现效果: 1:导航效果(兼容IE) 2:网站换肤 3:模块展开和关闭 4:新闻滚动 5:超链接文 ...

  3. 系列文章--JavaScript教程文章

    JavaScript教程文章专题列表如下: 我们应该如何去了解JavaScript引擎的工作原理 JavaScript探秘:编写可维护的代码的重要性 JavaScript探秘:谨慎使用全局变量 Jav ...

  4. WM_QUIT，WM_CLOSE，WM_DESTROY 消息出现顺序及调用方式

    http://bbs.ednchina.com/BLOG_ARTICLE_3005455.HTM VC中WM_CLOSE.WM_DESTROY.WM_QUIT消息出现顺序及调用方式 wxleasyla ...

  5. MySQL主从读写分离专题

    主机A:192.168.1.101从机B:192.168.1.102 1.先登录主机 Amysql>GRANT REPLICATION SLAVE ON *.* TO slave_user@19 ...

  6. uC/OS-III学习2：:uC/OS-III LED闪烁实验

    1 前言: 看完了uC/OS-III的基本介绍之后,大致对这个操作系统有了点了解,但真正的理解还是要通过不断的去使用,在使用中体验uC/OS-III的乐趣和更深的理解其工作原理是非常重要的.因此,我在 ...

  7. WPF仿360卫士9.0界面设计

    Chrome插件——一键保存网页为PDF1.0 http://blog.csdn.net/bdstjk/article/details/9208313 仿照网上的一个代码写的,地址找不到了. 将窗体, ...

  8. javascript优化

    javaScript是一门解释性的语言.它不像java.C#等程序设计语言.由编译器先进行编译再运行.而是直接下载到用户的客户端进行执行.因此代码本身的优劣就直接决定了代码下载的速度以及执行的效率. ...

  9. Looksery Cup 2015 A. Face Detection 水题

    A. Face Detection Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...

  10. cdoj 93 King's Sanctuary 傻逼几何题

    King's Sanctuary Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/sho ...