先看效果

代码：

<!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. hdoj 5328 Problems killer

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5328 #include<stdio.h> #include<algorithm> ...

  2. 如何为C语言添加一个对象系统

    为C语言添加OO能力的尝试从上世纪70年代到现在一直没有停止过,除了大获成的C++/Objective-C以外,还有很多其它的成功案例,比如GTK在libg中实现了一个对象系统,还有前几年一个OOC, ...

  3. 系列文章--SharePoint 开发教程

    SharePoint 2013 图文开发系列之入门教程 学习地址:http://www.cnblogs.com/jianyus/p/3461719.html 里面有2007.2010.2013各个版本 ...

  4. Flex坐标

    flash和flex针对不同的目的,提供了3种不同的坐标系. 全局的就是(stage级别的) 本地坐标系(组件级别的) 内容坐标系(相对于本地坐标系说的) 这些坐标系的点是可以转换的,并且有相应的方法 ...

  5. 【转】C++ 异常

    一.什么是异常处理 一句话:异常处理就是处理程序中的错误. 二.为什么需要异常处理,以及异常处理的基本思想 C++之父Bjarne Stroustrup在<The C++ Programming ...

  6. HDOJ 1914 The Stable Marriage Problem

    rt 稳定婚姻匹配问题 The Stable Marriage Problem Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 6553 ...

  7. 死锁相关 变量 与 PURGE 线程停止

    http://www.tuicool.com/articles/NzAFZn https://github.com/percona/percona-server/pull/83/commits/091 ...

  8. STC51系列单片机免掉电下载（热启动下载）

    相信喜欢单片机的朋友都用过STC的单片机,用过STC单片机的朋友都有这种感受:实惠.易用.功能强大!就是每次下载都要冷启动特别恶心,相信很多朋友的开发板上的电源键都按烂了. 其实STC单片机可以不用免 ...

  9. FMDB 二次封装工具类，让你快速学会封装，集成数据库

    来源:StrivEver 链接:http://www.jianshu.com/p/4c77aee0b41c 上个版本为了增加用户体验,部分页面集成了离线缓存数据功能,于是就在项目里使用了数据库管理离线 ...

  10. DbHelperSQL 判断数据库表结构公用方法

    #region 公用方法        /// <summary>        /// 判断是否存在某表的某个字段        /// </summary>        ...