不定高垂直居中的三种方法

不定高垂直居中（核心代码）

1.display:table-cell + vertical-align:middle

父元素（.parent）设置display：table-cell 变成单元格，再设置vertical-align:middle （改属性可以作用于inline inline-block table何table-cell 元素）
该布局的优缺点：
优点：兼容性比较好（虽然table-cell不支持IE6 7 但把结构改成table结构就兼容了）。
缺点：未知。

2.sbsolute + transform

父元素设置position:relative 可使它做为参照物,子元素设置position:absolute top:50%,会使子元素向下多移动盒子的高度一半，再设置transform:translateY(-50%)看使盒子向上移动盒子的高度一半（transform：translateY(-50%)的百分比参照物是自己）。
该布局的优缺点：
优点：absolute脱离文档流，不会影响到其他子元素。
缺点：transform属于css3的内容，不支持IE6 7 8 版本，还要给不同浏览器加上不同前缀。

3.display：flex + align-items：center

当只给父元素设置display：flex 时就会变成如上图，因当父元素设置了这值时，items的align-items值默认是stretch(被拉伸适应容器)，当设置值为center，就如下图（我们正需要的垂直居中）。

该布局的优缺点：
优点：只要在父元素上设置就行。
缺点：只支持高版本的浏览器。

不定高垂直居中的三种方法相关推荐

多行文本垂直居中的三种方法
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-alig ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
html2张图片垂直居中,任意图片实现垂直居中的三种方法(兼容性还不错)
在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准 ...
html整体垂直居中,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方法教程,遵循代码与文章教程懂得驾驭并加以应用. 一.使用flex完成垂直居中操作css flex实现垂直居中.flex兴许不是实现垂直居中最好的抉择,因为IE ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
CSS 实现垂直居中的三种方法
1.table-cell + vertical-align vertical-align 适用于inline-block 和 table-call 2. absolute + transform 3. ...
{转}Java 字符串分割三种方法
http://www.chenwg.com/java/java-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%88%86%E5%89%B2%E4%B8%89%E7%A7%8D%E6%9 ...
java string分割_java 字符串分割的三种方法(总结)
最近在项目中遇到一个小问题,一个字符串分割成一个数组,类似String str="aaa,bbb,ccc"; 然后以","为分割符,将其分割成一个数组,用什么方 ...

不定高垂直居中的三种方法

不定高垂直居中（核心代码）

不定高垂直居中的三种方法相关推荐

最新文章

热门文章