zoukankan      html  css  js  c++  java
  • CSS Transform让百分比宽高布局元素水平垂直居中

    center-percent-layout

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢?

    如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性。下面来看代码实例:

    HTML代码

    <div class="center">您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!</div>
    

    CSS代码

    .center{
    position: absolute;
    top: 50%;
    left: 50%;
    50%;
    height:30%;
    padding:20px;
    text-align:center;
    background:#393;
    color:#fff;
    transform: translate(-50%, -50%);
    }
    

    查看演示

    如果你直接复制代码无法使用,请添加-webkit-transform或-moz-transform前缀,案例中我使用了-prefix-free这个插件,插件作用就是不需要输入-moz-和-webkit-这些前缀。

  • 相关阅读:
    js封装一个哈希表
    js封装一个双链表
    js封装一个单链表
    js封装一个栈
    js封装一个优先级队列
    js封装一个队列
    微信小程序开发中自定义自适应头部导航栏
    Git的基本使用
    6位半数字万用表解释
    内存相关概念详解
  • 原文地址:https://www.cnblogs.com/axl234/p/3880834.html
Copyright © 2011-2022 走看看