如何将一个html页面置于浏览器中央_随笔

Html页面置于浏览器中央主要就靠css样式*{margin:0 auto}，让整个页面居中。下面是案例，

<html>

<head>

<title>无标题文档</title>

</head>

*{margin:0 auto}

#Layer1{border:1px solid #ff0000width:300pxheight:400px}

#layer2{width:200pxheight:100pxborder:1px solid #ffff00}

</style>

<body>

<tr>

</tr>

</table>

</div>

</body>

</html>

网页效果如下：

为了能够方便区分效果，所有表格和层都用了边框颜色来区分

起决定性作用的代码如下图

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<body>标签中，输入html代码：

reset()

window.onresize = function () {

reset()

}

function reset() {

var left = (window.innerWidth - $('div').width())/2

var top = (window.innerHeight - $('div').height())/2

$('div').css('margin-left', left + 'px')

$('div').css('margin-top', top + 'px')

}

3、浏览器运行index.html页面，此时无论怎么拉伸窗口，div都会自动调整到屏幕正中央。

欢迎分享，转载请注明来源：内存溢出

如何将一个html页面置于浏览器中央