• 绝对定位元素的水平垂直居中


    我知道的是这种方式:

    1 .ele {
    2     600px;
    3     height:500px;
    4     position:absolute;
    5     left:50%;
    6     top:50%;
    7     margin-top:-250px;
    8     margin-left:-300px;
    9 }

    这种方式倒也好理解。

    600px,height:500px:从浏览器的左上角(坐标[0,0])开始画出一个宽度为600像素,高度为500像素的矩形。

    left:50%:将元素向右平移50%,此时元素并不在正中间,此时是元素的最左边是整个屏幕的正中间,看起来元素是偏向右的。

    top:50%:将元素向下平移50%,此时元素在垂直方向也不是正中间,最上面的一边是在屏幕的正中间,看起来是偏向下的。

    其实,你可能也看出来了,要使元素水平居中显示,要将元素水平向左平移元素本身宽度的一半,要使元素垂直居中,则将元素向上平移元素本身高度的一半。

    这样就可以了。所以通过margin-top和margin-left来分别调整向上、左平移元素本身高度的一半、宽度的一半,以使元素达到绝对居中。

    在http://www.zhangxinxu.com看到了另外一种方式:margin:auto实现绝对定位元素的居中

    1 .element {
    2      600px; height: 400px;
    3     position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    4     margin: auto;    /* 有了这个就自动居中了 */
    5 }

    不过这个IE浏览器只支持IE8以上的,Firefox和Chrome是支持的。

  • 相关阅读:
    RabbitMQ简介、特性、使用场景、安装、启动与关闭
    mybatis的工作原理
    bzoj2119 股市的预测
    Noi2014 购票
    51Nod 算法马拉松22 开黑记
    COGS2485 从零开始的序列
    Codeforces Round #402 (Div.2)
    BestCoder Round #92
    COGS2294 释迦
    bzoj4764 弹飞大爷
  • 原文地址:https://www.cnblogs.com/luckystar2010/p/3455792.html
Copyright © 2020-2023  润新知