当前位置：首页 > 行业动态 > 正文

html如何全屏后居中显示

admin
行业动态
2024-03-27
3368

全屏后居中显示HTML内容

html如何全屏后居中显示第1张

要实现全屏后居中显示HTML内容，可以使用CSS样式和JavaScript代码来实现，下面是详细的步骤：

1. 创建HTML页面

创建一个基本的HTML页面结构，包括<html>、<head>和<body>标签，在<body>标签中添加需要居中显示的内容。

<!DOCTYPE html>
<html>
<head>
    <title>全屏居中显示</title>
    <!引入CSS样式 >
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!需要居中显示的内容 >
    <div id="content">
        <!在这里插入你的内容 >
    </div>
    
    <!引入JavaScript代码 >
    <script src="script.js"></script>
</body>
</html>

2. 编写CSS样式

接下来，创建一个名为styles.css的CSS文件，并使用以下样式规则将内容居中显示：

/* 设置body元素的样式 */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justifycontent: center;
    alignitems: center;
}
/* 设置#content元素的样式 */
#content {
    width: 80%; /* 设置宽度为80% */
    maxwidth: 1200px; /* 设置最大宽度为1200像素 */
    textalign: center; /* 居中显示文本内容 */
}

3. 编写JavaScript代码

创建一个名为script.js的JavaScript文件，并使用以下代码实现全屏功能：

// 获取#content元素
var content = document.getElementById('content');
// 监听窗口大小变化事件
window.addEventListener('resize', function() {
    // 获取窗口宽度和高度
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    
    // 设置#content元素的宽度和高度为窗口大小
    content.style.width = width + 'px';
    content.style.height = height + 'px';
});
// 触发一次窗口大小变化事件，确保初始状态正确
window.dispatchEvent(new Event('resize'));

现在，当你打开HTML页面时，内容将在全屏模式下居中显示，并且适应不同的窗口大小，记得将上述代码中的styles.css和script.js与你的HTML文件放在同一目录下。