zoukankan      html  css  js  c++  java
  • 实现元素垂直居中的方法(补充)

            之前发过一次《实现元素垂直居中的方法》的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo:

    <!DOCTYPE html>
    <html>
    <head lang="zh-cn">
       <meta charset="UTF-8">
       <title>居中的方法</title>
       <style>
           div{
               position:absolute;
               left:50%;
               top:50%;
               -webkit-transform: translate(-50%,-50%);
               -moz-transform: translate(-50%,-50%);
               -ms-transform: translate(-50%,-50%);
               -o-transform: translate(-50%,-50%);
               transform: translate(-50%,-50%);
               background: #ddd;
           }
       </style>
    </head>
    <body>
    <div>示例文字:本段话的宽度,高度不确定,且可能发生变化。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut commodi deserunt distinctio eligendi enim error eum exercitationem fugiat in, laudantium molestias perferendis, porro possimus quibusdam quisquam sequi tempore veniam.</div>
    </body>
    </html>

    怎么样?是不是很方便,新技能get!

    不知道在看文章的你有没有更好的方法,欢迎一起讨论。

  • 相关阅读:
    小福bbs-冲刺日志(第三天)
    小福bbs-冲刺日志(第二天)
    小福bbs-冲刺日志(第一天)
    灯塔-冲刺集合
    团队作业第六次—事后诸葛亮
    灯塔-冲刺总结
    灯塔-测试总结
    灯塔-冲刺日志(第七天)
    灯塔-冲刺日志(第六天)
    灯塔-冲刺日志(第五天)
  • 原文地址:https://www.cnblogs.com/gaoxinwu/p/7277071.html
Copyright © 2011-2022 走看看