搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

结合CSS3的新特性来总结垂直居中的如何实现方法

发布时间：2023-01-03 20:32:29 来源：网络
.
不是别人逼你去优秀，是你自己为自己而奋斗。身体是自己的，健康是自己的，难受也是自己的，所以不要想吃什么就吃什么。

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

CSS Code复制内容到剪贴板
  1. .middle-demo-1{
  2. height:4em;
  3. line-height:4em;
  4. overflow:hidden;
  5. }

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

XML/HTML Code复制内容到剪贴板
  1. <pstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,Arial,sans-serif;height:24px;width:370px;">Loremipsumdolorsitamet,consectetueradipiscingelit.</p>
  2. <br/>
  3. <br/>
  4. <pstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,sans-serif;height:2em;width:370px;overflow:hidden;">Loremipsumdolorsitamet,consectetueradipiscingelit.</p>

上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。

1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

CSS Code复制内容到剪贴板
  1. .box{
  2. position:absolute;/*或fixed*/
  3. top:50%;
  4. left:50%;
  5. margin-top:-100px;
  6. margin-left:-200px;
  7. }

2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

CSS Code复制内容到剪贴板
  1. .box{
  2. position:absolute;或fixed
  3. top:0;
  4. rightright:0;
  5. bottombottom:0;
  6. left:0;
  7. margin:auto;
  8. }

3.利用display:table-cell属性使内容垂直居中;

CSS Code复制内容到剪贴板
  1. .box{
  3. display:table-cell;
  5. vertical-align:middle;
  7. text-align:center;
  9. width:120px;
  11. height:120px;
  13. background:purple;
  15. }

4.使用css3的新属性transform:translate(x,y)属性;

CSS Code复制内容到剪贴板
  1. .box{
  2. position:absolute;
  3. transform:translate(50%,50%);
  4. -webkit-transform:translate(50%,50%);
  5. -moz-transform:translate(50%,50%);
  6. -ms-transform:translate(50%,50%);
  7. }

5.最高大上的一种，使用:before元素;

CSS Code复制内容到剪贴板
  1. .box{
  3. position:fixed;
  5. display:block;
  7. background:rgba(0,0,0,.5);
  9. }
  11. .box:before{
  13. content:'';
  15. display:inline-block;
  17. vertical-align:middle;
  19. height:100%;
  21. }
  23. .box.content{
  25. width:60px;
  27. height:60px;
  29. line-height:60px;
  31. color:red;

6.Flex布局;

CSS Code复制内容到剪贴板
  1. .box{
  2. display:-webkit-box;
  3. display:-webkit-flex;
  4. display:-moz-box;
  5. display:-moz-flex;
  6. display:-ms-flexbox;
  7. display:flex;
  8. 水平居中
  9. -webkit-box-align:center;
  10. -moz-box-align:center;
  11. -ms-flex-pack:center;
  12. -webkit-justify-content:center;
  13. -moz-justify-content:center;
  14. justify-content:center;
  15. 垂直居中
  16. -webkit-box-pack:center;
  17. -moz-box-pack:center;
  18. -ms-flex-align:center;
  19. -webkit-align-items:center;
  20. -moz-align-items:center;
  21. align-items:center;
  22. }

到此这篇关于结合CSS3的新特性来总结垂直居中的如何实现方法就介绍到这了。一个人身边没有人，就容易寂寞。但一个人心里没有人，才会空虚。更多相关结合CSS3的新特性来总结垂直居中的如何实现方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： 新特性
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图