zoukankan      html  css  js  c++  java
  • 让元素垂直水平居中的方式

        结构:     <div class="box"></div>

      方法一:

        .box{

          300px;

          height:200px;

          position:absolute;

          left:50%;

          top:50%;

          margin-left:-150px;

          margin-top:-100px;

          background:red;

        }

      方式二:

        .box{

          300px;

          height:200px;

          background:red;

          position:absolute;

          left:0;

          top:0;

          right:0;

          bottom:0;

          margin:auto;

        }

      方式三:

        .box{

          300px;

          height:200px;

          background:red;

        }

      js部分:

        $(".box").css({

          position:absolute,

          left:($(window).width()-$(".box").outerWidth())/2,

          top:($(window).height()-$(".box").outerHeight())/2,  

        })

        

     

       .

    第七种

    {
      position: absolute;
      left: 0;
      right:0;
      top: 50%;
      z-index: 1;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       transform: translateY(-50%);
       text-transform: uppercase;
    }
  • 相关阅读:
    点击文本变成输入框
    html代码片段
    node 开启Gzip压缩
    npm 安装与卸载
    console.dir()-----js中console.log()和console.dir()的区别
    javaScript学习笔记之-------this
    javaScript学习笔记之-------闭包
    从零搭建vue项目---VUE从无到有
    require.js扫盲版
    cross-env 解决跨平台设置的NODE_ENV的问题
  • 原文地址:https://www.cnblogs.com/ly-qingqiu/p/10232055.html
Copyright © 2011-2022 走看看