先看效果

代码：

<!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. spring+jpg环境下，spring实现文件下载web实现通用的文件下载方法

    jar包复制到WEB-INF 文件夹lib下: commons-io-1.3.2.jar public static String download(HttpServletRequest reques ...

  2. oracle 学习笔记--用户管理

    oracle 用户管理 创建用户(需要具有dba权限的用户) create user 用户名 identified by 密码 defaule tablespace users     //默认表空间 ...

  3. sql server 复制 需要有实际的服务器名称才能连接到服务器……

    原因是:之前修改过服务器实例名称执行一下语句 select @@servername select SERVERPROPERTY ('servername') 可以看到,两个不同的结果 修改实例名称i ...

  4. new 运算符

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

  5. JS阻塞的问题

    常见问题    http://www.zhihu.com/question/23101413   阻塞特性:        JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任 ...

  6. jsonUtil 工具类

    package org.konghao.basic.util; import java.io.IOException; import java.io.StringWriter; import com. ...

  7. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  8. cocos2d_x iconv转码

    作者:何卫 转载请注明,原文链接:http://www.cnblogs.com/hewei2012/p/3374147.html iconv下载(Android) 源码下载地址,已编译完的iconv包 ...

  9. Animated Scroll to Top

    Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to to ...

  10. SCVMM之Windows Server2012 R2新功能

    在Windows Server 2012 R2中可以通过使用共享的虚拟硬盘VHDX文件的方法来模拟IP SAN,来为虚拟机创建群集提供共享存储.这样为虚拟机创建群集时就不用再像以前一样通过使用软件模拟 ...