设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 17|回复: 0

[未分类] 关于令元素垂直居中的总结

[复制链接]

1万

主题

1万

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
33554
发表于 2018-2-13 23:20:09 | 显示全部楼层 |阅读模式
*** 最近在回顾之前的笔记,发现对元素垂直居中的方法都有点一头雾水了,上网查看了一下资料,写着总结***
对行内元素而言

  • 要令一个元素内的文字对齐,可将元素的行高(line-height)设置与元素高度一致,主要原理是利用基线的调整
    代码如下
    1. <divclass="demo" > <span >These </span > <span >elements </span > <span >will be </span > <span >centered vertically </span > </div >
    复制代码
  1. .demo{ backgroundcolor:black; padding:50px;
  2. }
  3. .demospan { backgroundcolor:gray; color:white; padding:30px0;
  4. }
复制代码
当然也可以模拟表格的行为来达到效果
  1. <divid='out' > <span >hehe </span > </div >
复制代码
  1. #out{ width:200px; height:200px; background:blue; display:table;
  2. }
  3. span{ display:tablecell; verticalalign:middle;
  4. }
复制代码
模拟表格行为之后对内部元素设置verticalalign:middle.可以达到居中的效果
对块级元素而言
先把HTML布局写出来
  1. <divid='out' > <divid='inn' > </div > </div >
复制代码
个人比较常用的三种方法

  • 绝对定位+内部元素负位移
    1. #out{
    2. position:relative;
    3. }
    4. #inn{
    5. position:absolute;
    6. top:50%;
    7. transform:translateY(50%);
    8. /*这里的transform属性的translate值,设置的50%是相对于内部元素自身宽高而言*/
    9. }
    复制代码
    这里的主要过程是先用绝对定位将内部块级元素的左上角定位到外壳元素的中部,在利用transform将其高度再"掰”回来一半(这里的一半是指内部元素高度的一半),这样就可以刚好使内部元素的中点定位在外壳元素的中点上(也就是取代了原来由于绝对定位后左上角的那个定位点)
  • 弹性布局(个人感觉这是个以后的趋势,毕竟现在都要求响应式,一个弹性布局的确能令网站更加灵活)
    1. #out{
    2. width:200px;
    3. height:200px;
    4. background:blue;
    5. display:flex; /*flex布局*/
    6. justify-content:center; /*水平居中*/
    7. align-items: center; /*垂直居中*/
    8. }
    复制代码
    这里我将水平也居中了,弹性布局需要注意的一点就是在外部父元素上设置 display:flex; 使其内部元素形成布局,所以对内部元素进行设置的话只会对更深层次的元素有效,不是对其本身有效。
    还看到有人这样用弹性布局
    1. #out{
    2. width:200px;
    3. height:200px;
    4. background:blue;
    5. display:flex;
    6. }
    7. #inn{
    8. width:100px;
    9. height:100px;
    10. background:green;
    11. margin:auto;
    12. }
    复制代码
    同样是在外部父元素设置布局,而再对内部元素的margin值设置,这样的话可以利用margin值对其进行想要的定位,不一定是中间(这种定位效果利用绝对定位也可以达到)
  • 绝对居中(据说是利用了CSS的溢出)
    1. #out{
    2. width:200px;
    3. height:200px;
    4. background:blue;
    5. position:relative;
    6. }
    7. #inn{
    8. width:100px;
    9. height:100px;
    10. background:green;
    11. position:absolute;
    12. margin:auto;
    13. top:0;bottom:0;left:0;right:0;
    14. }
    复制代码
    这一个感觉比较高玩,原理在网上看了好像是利用了CSS的溢出,但是都讲得不是很清楚,有知道的朋友可以给我留言啊!!!




上一篇:创建型模式之 -- 工厂方法模式
下一篇:MySQL:讨人喜欢的 MySQL replace into 用法(insert into 的增强版)
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-8-19 12:15

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表