zoukankan      html  css  js  c++  java
  • 绝对定位元素的水平垂直居中

    方法一:
    .element {
    600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px; /* 高度的一半 */  margin-left: -300px; /* 宽度的一半 */  }
    这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得
     
    方法二:
    .element {
    600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */  }
    兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。
     
    方法三:
    .element {
    600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto; 
    }
    上面代码的 600pxheight: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素)
     
  • 相关阅读:
    hover动画
    杀毒软件性能比较
    python文件转exe
    react 踩的坑
    js前端模块化(一) commonjs
    iframe嵌套页面 音频在微信公众号环境无法播放
    js正则表达式
    js修改伪类元素样式
    OAF 开发 Q&A
    JS打开窗口问题
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5163143.html
Copyright © 2011-2022 走看看