先看效果

代码：

<!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. C#下利用高精度计时器进行计时操作

    简介 精确的时间计量方法在某些应用程序中是非常重要的.常用的 Windows API 方法 GetTickCount() 返回系统启动后经过的毫秒数.另一方面,GetTickCount() 函数仅有 ...

  2. Objective-C 学习记录4

    字符串的一些方法使用: 1.创建字典的NSString可变字符串,和NSMutableString不可变字符串.都是objective的对象. char *str是字母数组. 2.字符串格式化:str ...

  3. 使用maphilight高亮显示map的指定area

    引用jquery.maphilight.js之后,调用如下方法: //obj参数是代表一个或者多个area的jQuery对象 function areaLight(obj) { var data = ...

  4. Docker 入门教程

    几个月以前,红帽(Red Hat)宣布了在 Docker 技术上和 dotCloud 建立合作关系.在那时候,我并没有时间去学习关于 Docker 的知识,所以在今天,趁着这个 30 天的挑战,我决定 ...

  5. Oracle用户、权限、角色管理

    Oracle 权限设置一.权限分类:系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对表或视图而言的).   二.系统权 ...

  6. 【转】Fresco之强大之余的痛楚

    http://www.jianshu.com/p/5364957dcf49 开始之前 如果你有使用的心得,技巧,踩坑经历,希望贡献出来,我会在TODO中慢慢添加(^^)/ 关于Fresco Fresc ...

  7. 终于可以发布Delphi下收点OSGI精髓皮毛而设计的插件框架WisdomPluginFramework

    这是一个Delphi实现的插件框架,我耗费了相当相当相当多的精力来设计她,虽然仅闪着点我微薄智慧的光芒,但我还是决定用Wisdom来命名她,也因它是我绝无仅有的,在完成1年多后回头来看仍能相当满意的作 ...

  8. vim编码相关配置

    主要与三个参数有有关 fileencoding 缩写:fenc 保存文件时所用的编码 set fenc 查看当前文件的编码 set fenc=utf-8 可以将当前文件转换为utf-8编码 filee ...

  9. UVALive 4221 Walk in the Park 扫描线

    Walk in the Park 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemi ...

  10. UVA 12898 And Or 数学暴力

    And Or Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.actio ...