巧用CSS居中未知高度的块元素

　　在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题，但是总是有些特殊场景让你无法得心应手的实现居中，本文介绍几种常用的经典的居中方法，总有一种适合你！

1. position

.parent {width: 200px;height: 200px;margin: auto;border: 1px solid red;position: relative;
}
.child {position: absolute;width: 100px;height: 50%;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-color: red;
}

2. flex

.parent {width: 200px;height: 200px;margin: auto;border: 1px solid red;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;
}
.child {width: 100px;height: 50%;background-color: red;
}

3. translate

.parent {width: 200px;height: 200px;margin: auto;border: 1px solid red;position: relative;
}
.child {width: 100px;height: 50%;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

4. calc

.parent {width: 200px;height: 200px;margin: auto;border: 1px solid red;position: relative;
}
.child {width: 100px;height: 50%;background-color: red;position: absolute;left: -webkit-calc(50% - 25%);left: -moz-calc(50% - 25%);left: -ms-calc(50% - 25%);left: calc(50% - 25%);top: -webkit-calc(50% - 25%);top: -moz-calc(50% - 25%);top: -mz-calc(50% - 25%);top: calc(50% - 25%);
}

　　本文介绍的四种方法全部由以下实例验证通过，且加了兼容性前缀，可以直接复制使用，建议使用时可以按顺序考虑，具体可看个人习惯，反正我是这个顺序，因为可以少写很多兼容性前缀，大家可以放心大胆的粘贴使用了，拿贴不谢！

　　布局如下：

　　效果如下：

转载于:https://www.cnblogs.com/lewiscutey/p/7501974.html

巧用CSS居中未知高度的块元素相关推荐

【内联元素居中、内联块元素居中、区块元素居中】06
居中文章目录居中 1. 文字.内联元素.内联块元素在父元素居中 2. 区块元素在父元素中居中 3. 练习 1. 文字.内联元素.内联块元素在父元素居中文字.内联元素居中. 父元素设置:text- ...
css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...
CSS之未知高度多行文本垂直居中
一直比较纠结垂直居中的问题,最近又查阅了一些资料,借鉴了一些优秀方案,捣鼓出了一个兼容性较强的多行文本垂直居中解决方案,主要思路依然是利用vertical-align:middle来实现,经过测试,该 ...
html垂直居中vertical,HTML_CSS解决未知高度垂直居中，尽管有CSS的vertical-align特性， - phpStudy...
CSS解决未知高度垂直居中尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, ...
html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...
15种CSS居中的方式
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
【前端】这可能是你看过最全的css居中解决方案了~
1.水平居中:行内元素解决方案适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex) html部分代码: ...
【基础】这15种CSS居中的方式，你都用过哪几种？
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
CSS居中方式（一）
文章目录 CSS居中方式一.水平居中 a. 内联元素水平居中 b. 块级元素水平居中 c. 多块级元素水平居中使用inline-block 使用display:flex 二.垂直居中 a. 单行内 ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...

巧用CSS居中未知高度的块元素

巧用CSS居中未知高度的块元素相关推荐

最新文章

热门文章