zoukankan      html  css  js  c++  java
  • 基于translate的水平垂直居中,适用于宽度已知,高度不固定的场景

    水平垂直居中项目中会遇到的比较多,解决方案也有多种,今天刚学到一种 用translate来解决水平垂直居中的方案,说这个方案前先说一下之前我经常解决水平垂直居中的一个方案

    <style>
     .box{position:fixed;top:50%;left:50%;width:100px;height:100px;margin-left:-50px;margin-top:-50%;background:red;}
    </style>
    <div class="box"></div>

    上面的这种方案必须是在宽高都明确的情况下,才可以水平垂直居中,

    而如果现在只知道宽,高不固定,需要根据元素内部内容的多少而高度进行变化的情况下,又想水平垂直居中,那么可以使用translate来解决

    <style>
    .box{position:fixed;top:50%;left:50%;width:100px;transform:translate(-50%,-50%);background:green;}
    </style>
    <div>translate </div>

    translate 移动元素的方式可以总结归纳为三种:水平移动,上下垂直移动,对角移动

    水平移动 向右移动 translate(x,0); 向左移动 translate(-x,0)

    上下移动 向上移动 translate(0,-y); 向下移动 translate (0,y);

    对角移动 向右下角移动 translate(x,y) 向 右上角移动 translate(x,-y); 向左下角移动  translate(-x,y) 向左上角移动 translate(-x,-y)

  • 相关阅读:
    【转】免费搭建独立博客,WordPress+独立域名+独立空间
    MongoDB索引
    面向对象
    浏览器为webapp
    转载Chrome浏览器IOS
    浅淡Webservice、WSDL三种服务访问的方式(附案例)
    Plupload
    转载Yale CAS + .net Client 实现 SSO(6)
    java 对Hbase的基本操作
    【精】iOS开发视频教程下载
  • 原文地址:https://www.cnblogs.com/sandraBlog/p/translate_.html
Copyright © 2011-2022 走看看