zoukankan      html  css  js  c++  java
  • 让一个元素垂直水平居中的三种方法【转】

    第一种方法:

    div.box{

    weight:200px;

    height:400px;

    <!--把元素变成定位元素-->

    position:absolute;

    <!--设置元素的定位位置,距离上、左都为50%-->

    left:50%;

    top:50%;

    <!--设置元素的左外边距、上外边距为宽高的负1/2-->

    margin-left:-100px;

    margin-top:-200px;

    }

    *兼容性好;缺点:必须知道元素的宽高

    -------------

    第二种方法:

    div.box{

    weight:200px;

    height:400px;

    <!--把元素变成定位元素-->

    position:absolute;

    <!--设置元素的定位位置,距离上、左都为50%-->

    left:50%;

    top:50%;

    <!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

    transform:translate(-50%,-50%);

    }

    *这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器

    ---------------

    第三种方法

    div.box{

    weight:200px;

    height:400px;

    <!--把元素变成定位元素-->

    position:absolute;

    <!--设置元素的定位位置,距离上、下、左、右都为0-->

    left:0;

    right:0;

    top:0;

    bottom:0;

    <!--设置元素的margin样式值为 auto-->

    margin:auto;

    }

    转载自:http://www.cnblogs.com/linsinan/p/6132241.html

  • 相关阅读:
    初识MySQL
    正则表达式
    多线程
    多进程
    Python基础--模块
    Python基础--异常
    Python基础--面向对象
    Python基础--文件操作
    Python基础--函数
    python3 日期时间差计算
  • 原文地址:https://www.cnblogs.com/zhao-bo/p/6135651.html
Copyright © 2011-2022 走看看