白浅教你CSS的垂直居中方法

zengdongbao 发布于2019-08-30 15:52 / 773人阅读

placeholder: 我是一个不正经的属性.
                                                                          ----题记

说道页面垂直居中, 在大家的思维中, 很快就能有若干个(常用/用过)解决方法, 但是在很多面试题中, 都会出现这么一个题, 写出多个垂直居中的方法, (其实掌握比较通用的, 兼容性好的方法就行了, 其他的就当看着玩, 有遗漏的欢迎补充 ps: 最好私信我给我留点面子 /坏笑). 那么下面就介绍几种垂直居中的方法:

默认的样式

首先我先有一些默认的样式(都是一些比较常规的样式表, 一看就懂, 对本文核心影响不大).

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ex{
  width:100% ;
  height: 100px;
  background: #eee;
  text-align: center;
  margin: 10px 0;
}
.ex_1{
  background-color: lightgreen;
}
/* 本来想用多个, 后来考虑没什么用, 就留下了一个子元素 */

.ex > div{
  margin: 0 auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
}

方法一

父元素设置{ display: flex; align-items: center; }

原理是运用了flex布局, 同时使用css3的属性align-items, 兼容性较差.

展示效果:

方法二

父元素设置{ display: flex; } 子元素设置{ align-self: center; }

与方法一相同, 只是垂直居中的属性添加到了子元素当中(调皮的由item换成了一个self).

展示效果:

方法三

如果在一段块元素包裹的行内元素中有某个元素比较特殊, 比如: 大写加粗的文字 、 乱入的图片图标, 垂直居中:

该元素设置 { vertical-align: middle; }
/* 同时对应 text-bottom/text-top 为下对齐/上对齐 */

兼容性:

//xxx(请原谅我不想提他的名字), 竟然支持到了4.0 惊艳到我了

展示效果:

方法四

父元素相对定位(或其他定位){ position: relative; }
子元素绝对定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }

关键点在于: margin: auto
兼容性方面, 我稍有疑问,
top为例:

而position:

那么请问: 5.0~6.9999999之间top等元素做了什么?(欢迎大(lao)神(niao)解答 /坏笑)

展示效果:

方法五

父元素设置{ padding: xxpx; height: auto !important;/*替换了我的默认样式*/ }

当有高度不固定的内容时.

兼容性:

展示效果:

方法六

    line-height/height设置为等值

适用于子元素为内联元素或文字的块元素.

兼容性:

展示效果:

方法七

父元素设置{ display: table-cell; vertical-align: middle; }
/* 缺点元素宽度不能设置为百分比, 可以为固定像素值 */

兼容性:

展示效果:

方法八

父元素设置{ position: relative; }
中间元素{ position: absolute; top: 50%; left: 50%; }
子元素{ position: relative; top: -50%; left: -50% }

原理是, 中间元素左上角, 位于父元素中心点, 子元素相对中间元素top/left位移-50%, 使子元素中心与中间元素左上角重合, 同时与父元素中心重合( 垂直/水平居中 ).

兼容性:(同方法四)

展示效果:

方法九

父元素设置{ display: box; box-pack: center; box-align: center; }

其中box-pack为x轴, box-align为y轴.

兼容性(完(pou)美(gai)):

目前主流浏览器都不支持box-pack属性。
Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。
Firefox通过私有属性- MOZ-box-pack支持。
Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.
注意： Internet Explorer 9及更早IE版本不支持弹性框.

展示效果:

方法十

父元素设置{ position: relative; }
子元素设置{ position: absolute; top: 50%; left: 50%; transform: translate: (-50%, 50%) }

与方法八有异曲同工之妙, 但是是运用了css3的属性 transform.
兼容性:

展示效果:

可能还会有其他方法, 欢迎补充.

出发点:
想起来一次面试的时候, 第一题貌似就是这个,
好像见过很多次, 如果你能列出来5种, 8种, 10种甚至更多, 面试官会不会吓死?
希望试过的同学记得告诉我结果... ( 纯属扯淡, 如有雷同, 就是事实. )

声明: 点下推荐不会怀孕.

以上.

混合云私有云垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116469.html

[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS垂直居中的七个方法

摘要：下面的会造成这种样子的垂直居中因此，如果有一个方块变成了高度，那么其他的方块就会真正的垂直居中。使用使用或的属性，轻轻松松就可以做到垂直居中的效果。我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是垂直居中这个讨...

mingzhong 2019-08-02 16:15 评论0 收藏0