zoukankan      html  css  js  c++  java
  • CSS实现定位元素居中的方法

    绝对定位元素的居中实现

    如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。

    一、

    兼容性不错的主流用法是:

    1 CSS Code复制内容到剪贴板
    2 
    3 .element {   
    4      600px; height: 400px;   
    5     position: absolute; left: 50%; top: 50%;   
    6     margin-top: -200px;    /* 高度的一半 */  
    7     margin-left: -300px;    /* 宽度的一半 */  
    8 }  

    但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

    二、

    CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

    1 CSS Code复制内容到剪贴板
    2 
    3 .element {   
    4      600px; height: 400px;   
    5     position: absolute; left: 50%; top: 50%;   
    6     transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */  
    7 }  

    于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。

    然,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

    三、

    实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto.


    margin:auto实现绝对定位元素的居中

    首先,我们来看下CSS代码:

    CSS Code复制内容到剪贴板
    
    .element {   
         600px; height: 400px;   
        position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0;   
        margin: auto;    /* 有了这个就自动居中了 */  
    }  

    代码两个关键点:

        上下左右均0位置定位;
        margin: auto

    于是,就居中了。上面代码的 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~

    转载自网址:http://www.divcss5.com/css3-style/c50561.shtml

  • 相关阅读:
    tile38 复制配置
    The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS
    tile38 一款开源的geo 数据库
    sqler sql 转rest api 的docker 镜像构建(续)使用源码编译
    sqler sql 转rest api javascript 试用
    sqler sql 转rest api redis 接口使用
    sqler sql 转rest api 的docker image
    sqler sql 转rest api 的工具试用
    apache geode 试用
    benthos v1 的一些新功能
  • 原文地址:https://www.cnblogs.com/zzq-229/p/11232039.html
Copyright © 2011-2022 走看看