如何让一个方块上下左右居中

//构造函数;(function($, window, document,undefined){    var MaskLayer = function(ele, opt){        this.$element = ele,        this.defaults = {            width:‘500px‘,            height:"500px",            backgroundColor:"#00baff",            display:"block"        },        this.options = $.extend({}, this.defaults, opt)    };//方法    MaskLayer.prototype = {        mask: function() {            var _left,_top,_newWidth,_newHeight;            if($(‘div‘).is(‘.big-mask‘)){                $(".big-mask").css({display:"block"})            }else{                $("body").append("<div class=‘big-mask‘></div>");                $(".big-mask").css({                    position:"fixed" ,                    width:"100%",                    height:"100%",                    top:0,                    left:0,                    backgroundColor:"#000",                    opacity: "0.5",                    filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)",                    zIndex: "99999"                });            }            console.log(this.$element);           this.$element.css({                backgroundColor:this.options.backgroundColor,                width:this.options.width,                height:this.options.height,                display:this.options.display,                zIndex: "999999",                position:"fixed"            });            _left =  parseInt($(window).width()/2);            _top =  parseInt($(window).height()/2);            _newWidth =_left-parseInt(this.options.width)/2;            _newHeight =_top-parseInt(this.options.height)/2;

            return this.$element.css({                ‘left‘: _newWidth,                ‘top‘:_newHeight            });        },        removeMask:function(){            this.$element.css({display:"none"});            $(".big-mask").css({display:"none"});        }    };//myMaskLayer对象使用    $.fn.createMaskLayer = function(options) {        var masklayer = new MaskLayer(this, options);        return masklayer.mask();    }

    $.fn.maskRemove = function(options) {        var masklayer = new MaskLayer(this, options);        return masklayer.removeMask();    }

})(jQuery, window, document);

//调用方法
$(".aaa").createMaskLayer({    backgroundColor:"#fff",    width:"300px",    height:"300px"});
$(".aaa").maskRemove();
时间: 2024-11-05 09:43:25

如何让一个方块上下左右居中的相关文章

关于一个div上下左右居中的css方法

1:通过position:absolute定位,上下左右的值都设为0,margin:auto:需要知道div的宽高 { width: 64px; height: 64px; border: 1px solid red; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } 2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高

让一个div 上下左右居中

方法1:.div1{         width:400px;         height:400px;         border:#CCC 1px solid;         background:#99f;         position:absolute;         left:50%;         top:50%;         transform: translate(-50%,-50%);}                        <div class=&quo

css div上下左右居中

相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class="f"><div class="content"></div></div> <style> .f{ width: 800px; height: 800px; position:relative; } .content

css:子元素div 上下左右居中方法总结

最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 备注:此处小编使用position:fixed为最佳方案,因为position:fix

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

上下左右居中的方法总结

居中的方法有很多,比较难的是选择合适的方法. 今天搜了一下,总结一下各种居中方法的优缺点. 演示效果 方法一 使用flexbox伸缩盒布局 优点: 简单,可能以后会成为主流 缺点: 兼容性差 查看这里 ##方法二 把包裹的父容器显示方式改成table,子元素改成table-cell,然后table-cell里面的元素就可以使用vertical-align 属性.(当然不只是table-cell,vertical-align适用于 inline level, inline-block level

元素div 上下左右居中方法总结

情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 情景二:一个父元素div,一个已知宽度.高度的子元素div(200*300) 解决方案: 1.position布局 { position:absolute/fixed; top:50%; left:50%; margin-left:-100px; margin-top:-150px;}

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>div块上下左右居中</title> </head> <body>     <div id="div2">     </div>     <style>     *{p

上下左右居中模块(上下左右垂直居中)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上下左右居中模块</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } .lanren{ position: fix