让div自适应浏览器窗口居中显示

今天做 banner 时发现一个问题，就是浏览器窗口水平拉伸时 banner 图未能居中，所以网上找了些资料，自己写了个小 demo

html代码：

<div class="div1">
    <div class="div2">自适应浏览器水平垂直居中</div>
</div>

css代码：

.div1{
            width: auto;
            height: 600px;
            background: #cccccc;
            position: relative;
        }
.div2{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -600px;
            margin-top: -200px;
            width: 1200px;
            height: 400px;
            background: #4fcc8d;
            line-height: 400px;
            font-size: 36px;
            text-align: center;
        }

原理就是，先用 left：50%； top：50%； 让这个 div 的左上角位于页面正中，如图：

然后再利用 margin-left：－600px；margin-top:-200px；使div向左向上移动它自身宽高的一半，最终效果：

时间： 2024-10-05 12:41:22

让div自适应浏览器窗口居中显示的相关文章

div在浏览器窗口中居中

让div相对于浏览器窗口居中. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> #test { width:200px; height:200px; background-color:#FC0; position:fixed; } </style> <script>

jquery实现div自适应浏览器高度

<!DOCTYPE html><html><head><meta charset=UTF-8 /><title>jquery实现div自适应浏览器高度(宽度)</title><meta name="keywords" content="html5" /><meta name="description" content="html5 test&quo

MFC 窗口居中显示 VS2010

MFC 窗口居中显示  VS2010 (2011-09-11 19:52:05) 转载▼ 标签: 窗口居中显示 it 分类: MFC MFC窗口居中显示   VS2010   工程名为:MFC22_6 目的:点击居中按钮,窗口将在文档的中央显示思路:使窗口居中显示可以调用CWnd::CenterWindow函数.void CenterWindow(CWnd* pAlternateOwner=NULL):步骤: 1.   用创建一个单文档应用程序 2.   添加一个对话框资源//(类视图 右键—添

JavaScript特效实例005-控制弹出窗口居中显示

实例005                控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,参数x,y表示窗口移动到的位

Qt 设置窗口居中显示和窗体大小

设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以 move((desktop->width() - this->width())/2, (desktop->height() - this->height())

echarts使图标能自适应浏览器窗口变化，及经纬度转换

1.echarts使图标能自适应浏览器窗口变化 window.onresize = function () { myChart.resize(); //使第一个图表适应 myChart_pieMain.resize(); // 使第二个图表适应 } 2.map地图中经纬度与平面坐标转换 var arr = [117,36.4]; alert(myChart.chart.map.getPosByGeo("china",arr));  //map经纬度转成平面坐标 版权声明:本文为博主原创

Jquery使容器自适应浏览器窗口

一.几个关键点 1:当文档大小改变时可以通过哪个事件来触发? resize([Data], fn) 可传入data供函数fn处理. 示例: $(window).resize(function(){ alert("Stop it!"); });      2:怎样获得浏览器窗口的宽度高度? 获取当前浏览器窗口的宽度 $(window).width(); 获取第一段的宽 $("p").width() 获取当前HTML文档宽度 $(document).width(); 3

弹出窗口居中显示

$(function() {    // 居中    function center(obj) {               var screenWidth = $(window).width(), screenHeight = $(window).height();  //当前浏览器窗口的 宽高        var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度           var objLeft = (screenWidt

html div自适应动态上下左右居中

html 的body里只放一个div,其他的内容放在这个div里,设置div的样式如下:                   div {                             position:absolute;                             background:#404040;                             width:500px;                             height:400px;