垂直居中重要方法理解---重点是方法三

方法一

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

<div id="wrapper"><div id="cell"><div class="content">Content goes here</div></div>
</div>

#wrapper {                  display:table;                        }
#cell {           display:table-cell;           vertical-align:middle;         }

优点：
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)

方法二：

这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

<div class="content">Content goes here</div>

#content {position:absolute;top:50%;height:240px;margin-top:-120px; /* negative half of the height */
}

优点：
适用于所有浏览器
不需要嵌套标签

缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

方法三

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

<div id="floater"></div>
<div id="content">Content here
</div>

#floater {                 float:left ;                  height:50%;                  margin-bottom:-120px;               }
#content    {                  clear:both ;                   height:240px ;                   position:relative ;                }

优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)

例如：

上边的元素正好在50%–0.5*下边元素的位置：这里为了便于说明，我给#floater添加了背景和内容；

如何不给#floater添加内容，看到是这样的：

为了便于看清楚：

我改变父级元素为box，如下：

四、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle {
height: 4em;
line-height: 4em;
overflow: hidden;
}

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

五、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle {
padding-top: 24px;
padding-bottom: 24px;
}

优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度

转载于:https://www.cnblogs.com/QingFlye/p/4119901.html

垂直居中重要方法理解---重点是方法三相关推荐

OC get set 方法理解 get set方法不能同时重写
最近在了解Xcode 对 @property 所做的事情我们都知道用@property 声明的属性 Xcode 会帮我们生成get set 方法,有时我们根据实际需要会重写get 或者set 方法. ...
深入理解Java虚拟机（三）之详拆运行时数据区的各个结构----方法区（元空间）
目录栈.堆.方法区的交互关系方法区的理解设置方法区的大小和OOM 方法区的内部结构存放内容类型信息域信息方法(Method)信息. 静态变量常量(static final) 运行时常量 ...
JVM学习笔记之-方法区,栈、堆、方法区的交互关系,方法区的理解,设置方法区大小与OOM,方法区的内部结构,方法区使用举例
栈.堆.方法区的交互关系运行时数据区结构图从线程共享与否的角度来看栈,堆,方法区的交互关系方法区的理解方法区在哪里? <Java虚拟机规范>中明确说明:"尽管所有的方法 ...
深入理解Objective-C：方法缓存
摘要只要用到Objective-C,我们每天都会跟方法调用打交道.我们都知道Objective-C的方法决议是动态的,但是在底层一个方法究竟是怎么找到的,方法缓存又是怎么运作的却鲜为人知.本文主要从 ...
深入理解 Objective-C：方法缓存
摘要只要用到Objective-C,我们每天都会跟方法调用打交道.我们都知道Objective-C的方法决议是动态的,但是在底层一个方法究竟是怎么找到的,方法缓存又是怎么运作的却鲜为人知.本文主要从 ...
android 编程输入矩阵,Android中Matrix的pre post set方法理解
虽说以前学习过线性代数和图形学原理,但是在实际中碰到matrix还是疑惑了好一阵子,今天通过向同事请教终于找到一点门路,特总结如下: Matrix主要用于对平面进行缩放,平移,旋转以及倾斜操作,为简化 ...
从MIXMAX概率模型理解Bayesian建模方法
从MIXMAX概率模型理解Bayesian建模方法储备知识 HMM-隐马尔可夫模型(Hidden Markov Model) GMM-混合高斯模型多元高斯分布(The Multivariate n ...
十四、理解nn.module方法——学习python面向对象编程（一）
起因在(十二)中说到pytorch中创建神经网络的两种方法:一个是Sequential类(这也是一种继承父类属性和方法并可对其方法重构的子类),另一个是自己编写代码,继承nn.module类,对其内 ...
理解WebViewClient各方法重写的作用
创建并设置一个WebViewClient子类,回调对应的方法改变网页内容的呈现方式,比如:网页加载错误回调onReceivedError(),提交表单错误回调onFormResubmission(), ...

垂直居中重要方法理解---重点是方法三

方法一

方法二：

方法三

垂直居中重要方法理解---重点是方法三相关推荐

最新文章

热门文章