使用CSS中的`position: fixed`属性实现居中的`＜div＞`元素 - JavaScript技巧

最新推荐文章于 2025-09-11 08:56:24 发布
最新推荐文章于 2025-09-11 08:56:24 发布
阅读量500 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css javascript tensorflow js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/133284667
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何利用CSS的`position: fixed`属性结合JavaScript实现网页上元素的居中效果。详细阐述了HTML、CSS和JavaScript代码示例，通过设置元素的初始位置和响应窗口大小变化来确保元素始终保持居中状态。

在Web开发中，居中元素是一个常见的需求。CSS的position属性提供了多种定位方式，其中fixed是一种常用的定位方式，可以使元素相对于浏览器窗口进行定位。结合JavaScript技巧，我们可以实现一个居中的<div>元素。

以下是一个详细的示例，展示了如何使用CSS中的position: fixed和JavaScript来实现一个居中的<div>元素：

HTML部分：

<!DOCTYPE html>
<html>
<head
了解本专栏 订阅专栏 解锁全文
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
css3 position fixed固定居中问题解决方案
09-25
让此元素位置固定一般会添加position:fixed，但元素就不能居中了，fixed使对象脱离了正常文档流，解决方法如下
关于position:fixed;的居中问题
a6617681的博客
07-21 1416
通常情况下，我们通过操作margin来控制元素居中，代码如下： 1 #name{ 2 maigin：0px auto; 3 } 但当我们把position设置为fixed时，例如： 1 #id{ 2 position:fixed; 3 margin:0px auto; 4 } 以上代码中的margin:0px auto;会出现失效...
CSS基础教程（二十四）Position(定位)：别让你的div在页面上“裸奔”了！CSS Position定位全攻略：从社畜固定到自由飞翔
jxf_jxfcsdn的博客
09-11 319
还在为页面元素胡乱堆叠而头疼吗？CSS Position属性就是你掌控布局的“空间魔法”！本文将深度剖析static、relative、absolute、fixed和sticky五种定位方式。你以为absolute是绝对自由？其实它也得“认爹”！fixed真的雷打不动吗？sticky又如何上演“黏人”大法？通过大量生动比喻和即拿即用的代码示例，带你彻底玩转CSS定位，让你的每一个元素都乖乖待在它该在的地方，从此布局不再是玄学！
【css】定位position: 【fixed】 居中
sinat_29326171的博客
05-20 491
.aa { position: fixed; top: 0px; left: 0px; right: 0px; width: 200px; height: 200px; margin-left:auto; margin-right:auto; }
position:fixed 固定并居中
weixin_43833851的博客
08-29 5836
不是前端，做前端的活真是寸步难行，一个居中就搞了好久 <html> <head> <meta charset="utf-8"> <title></title> <style> .pos_fixed { position:fixed; margin:auto; left:0; right:0; bottom:10...
css position fixed 居中,css3 position fixed居中的问题
weixin_29725791的博客
08-04 660
通常，我们要让某元素居中，会这样做：#element{margin:0 auto;}如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下：#element{position:fixed;margin:0 auto;}但是这样做的结果就是，元素不居中了。这说明fixed使解决方案：#element{position:fixed;margin:0 auto;left:0;rig...
const App = Vue.createApp({}) App.component("my-alert",{ template: ` <div> <div> <button @click="show = true">弹出弹窗</button> </div> <teleport to="body"> <div v-if="show" style="text-align: center; padding: 20px; position: absolute; top: 30%; left: 30%; width: 40%; border: black solid 2px; background-color: white;"> <h3>弹窗</h3> <button @click="show = false">隐藏弹窗</button> </div> </teleport> </div> `, data(){ return{ show:false } } }) App.mount("#Application")<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="script/vue.global.js"></script> <script src="script/t68.js" defer></script> </head> <body> <div id="Application"> <div style="position: absolute; width: 50px;"> <my-alert></my-alert> </div> </div> </body> </html>错哪里了，错误的地方注释起来
最新发布
10-30
- `<script src="script/t68.js" defer>` 如果该文件包含 `App.mount()`，而此时 DOM 还没解析到 `<div id="Application">`，会报错找不到元素。 - ✅ 解决方案：将脚本放在 `</body>` 前，或使用 `...
在这段代码中，我有一个隐藏标题栏和导航栏的按钮功能，这个按钮我不要文字的，改成图标的，并且鼠标不移动上去的时候，是完全隐藏的，另外，隐藏的时候，是先隐藏导航栏再隐藏标题栏，但是我点击隐藏，标题栏会瞬间变小，显示错误，帮我找一下原因，给我全部的代码， 以下为当前代码<template> <div class="app-container"> <!-- 隐藏/显示按钮 --> <div class="toggle-btn" @click="toggleCollapse" :style="{ left: isCollapsed ? '50%' : 'calc(50% + 100px)' }" > {{ isCollapsed ? '展开' : '隐藏' }} </div> <!-- 导航标题 --> <div class="nav-header" :class="{ collapsed: isCollapsed }"> <h3>iiot</h3> </div> <!-- 主布局 --> <div class="main-layout"> <!-- 左侧导航栏 --> <div class="left-nav" :class="{ collapsed: isCollapsed }"> <el-menu class="custom-menu" :collapse="false" background-color="#1a2b4a" text-color="#d7e3ff" active-text-color="#409EFF" :unique-opened="true" router > <el-sub-menu index="1"> <template #title> <el-icon><Document /></el-icon> <span>任务管理</span> </template> <el-menu-item-group> <el-menu-item index="/taskList">调度任务</el-menu-item> <el-menu-item index="/taskType">任务编辑</el-menu-item> <el-menu-item index="/commandSet">指令编辑</el-menu-item> <el-menu-item index="/log-types">任务日志</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="2"> <template #title> <el-icon><Files /></el-icon> <span>大屏展示</span> </template> <el-menu-item-group> <el-menu-item index="/display_all">总览</el-menu-item> <el-menu-item index="/warehouse_status">仓库状态</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="3"> <template #title> <el-icon><Notebook /></el-icon> <span>库位管理</span> </template> <el-menu-item-group> <el-menu-item index="/warehouse">库位管理</el-menu-item> <el-menu-item index="/station">站点管理</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="4"> <template #title> <el-icon><Setting /></el-icon> <span>配置模块</span> </template> <el-menu-item-group> <el-menu-item index="4-1">设备管理</el-menu-item> <el-menu-item index="4-2">变量管理</el-menu-item> <el-menu-item index="4-5">路径管理</el-menu-item> <el-menu-item index="4-6">管控区域</el-menu-item> </el-menu-item-group> </el-sub-menu> </el-menu> </div> <!-- 右侧内容区 --> <div class="right-content" :class="{ full: isCollapsed }"> <router-view></router-view> </div> </div> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import { Document, Notebook, Files, Setting } from "@element-plus/icons-vue"; const isCollapsed = ref(false); const isAnimating = ref(false); // 防止动画期间重复点击 const toggleCollapse = () => { if (isAnimating.value) return; isAnimating.value = true; if (isCollapsed.value) { // 展开过程：先显示标题栏，等待1秒后显示导航栏 isCollapsed.value = false; setTimeout(() => { isAnimating.value = false; }, 5000); // 标题栏2秒动画 + 1秒等待 + 导航栏2秒动画 = 5秒 } else { // 折叠过程：先隐藏导航栏，等待1秒后隐藏标题栏 isCollapsed.value = true; setTimeout(() => { isAnimating.value = false; }, 5000); // 导航栏2秒动画 + 1秒等待 + 标题栏2秒动画 = 5秒 } }; </script> <style> /* 全局样式重置 */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } /* 确保所有元素使用border-box */ *, *::before, *::after { box-sizing: border-box; } </style> <style scoped> .app-container { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: #ffffff; overflow: hidden; position: relative; } .nav-header { padding: 12px 15px; display: flex; align-items: center; background-color: #152238; border-bottom: 0px solid #000000; flex-shrink: 0; /* 标题栏基础动画设置 */ transition: all 0.3s ease; } .left-nav { height: 100%; display: flex; flex-direction: column; width: 200px; /* 导航栏基础动画设置 */ transition: all 0.3s ease; } .nav-header h3 { margin: 0; font-size: 22px; color: #d7e3ff; font-weight: 600; margin-left: 10px; } .main-layout { display: flex; flex: 1; overflow: hidden; min-width: 0; } .right-content { flex: 1; height: 100%; background-color: #f0f2f5; overflow: auto; padding: 0px; transition: all 2s ease; } .custom-menu { border-right: none; flex: 1; width: 100%; } /* 调整菜单项样式 */ .custom-menu .el-menu-item, .custom-menu .el-sub-menu__title { height: 50px; line-height: 50px; } /* 调整图标和文字的间距 */ .custom-menu .el-icon { margin-right: 8px; } /* 悬浮按钮样式 */ .toggle-btn { position: fixed; top: 5px; transform: translateX(-50%); z-index: 1000; background-color: #152238; color: #d7e3ff; padding: 5px 15px; border-radius: 15px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, left 0.3s ease; } /* 感应区域 */ .app-container::before { content: ''; position: fixed; top: 0; left: calc(50% - 50px); width: 100px; height: 20px; z-index: 999; } /* 鼠标悬停时显示按钮 */ .app-container:hover .toggle-btn { opacity: 0.8; pointer-events: auto; } .toggle-btn:hover { opacity: 1 !important; } /* 折叠状态样式 - 隐藏过程 */ .left-nav.collapsed { /* 导航栏立即开始隐藏动画（2秒） */ width: 0; overflow: hidden; transition: all 2s ease 0s; /* 无延迟 */ } .nav-header.collapsed { /* 标题栏延迟3秒开始隐藏动画（导航栏2秒 + 等待1秒） */ height: 0; padding: 0; border: 0; overflow: hidden; transition: all 2s ease 3s; /* 3秒延迟 */ } /* 展开状态样式 - 显示过程 */ .nav-header:not(.collapsed) { /* 标题栏立即开始显示动画（2秒） */ transition: all 2s ease 0s; /* 无延迟 */ } .left-nav:not(.collapsed) { /* 导航栏延迟3秒开始显示动画（标题栏2秒 + 等待1秒） */ transition: all 2s ease 3s; /* 3秒延迟 */ } .right-content.full { left: 0; } </style>
08-13
下面给出修改后的完整代码：</think>以下是修改后的完整代码，解决了标题栏瞬间变小的问题，并将按钮改为图标形式： ```vue <template> <div class="app-container"> <!-- 隐藏/显示按钮（图标形式） --> <div ...
这段代码，为什么卡片宽度没有到页面最大 <div> <el-space :fill="true"> <el-card v-for="i in 3" :key="i" class="box-card"> <template #header> <div class="card-header"> <span>Card name</span> <el-button class="button" text>Operation button</el-button> </div> </template> <div v-for="o in 4" :key="o" class="text item"> {{ "List item " + o }} </div> </el-card> </el-space> </div>
07-16
<think>我们正在解决的是el-card在特定布局中无法自适应页面最大宽度的问题。根据引用内容，我们可以分析可能的原因和解决方案。 可能的原因： 1. el-card默认是块级元素，会占满父容器的宽度。如果它没有自适应...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>宿舍调整管理系统</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <style> .student-card { transition: all 0.3s; border-left: 4px solid #0d6efd; } .student-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .selected { background-color: #e7f1ff; } .student-card { transition: all 0.3s; border-left: 4px solid #0d6efd; } .student-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .selected { background-color: #e7f1ff; } .adjust-animation { animation: highlight 2s; } @keyframes highlight { 0% { background-color: #d4edda; } 100% { background-color: transparent; } } #adjustHistory { max-height: 300px; overflow-y: auto; } </style> </head> <body> <div class="container-fluid py-4"> <div class="row mb-4"> <div class="col-md-6"> <h2><i class="bi bi-people-fill me-2"></i>宿舍调整管理</h2> </div> <div class="col-md-6 text-end"> <button class="btn btn-primary me-2" id="confirmAdjust"> <i class="bi bi-check-circle me-1"></i>确认调整 </button> <button class="btn btn-outline-secondary" id="printList"> <i class="bi bi-printer me-1"></i>打印名单 </button> </div> </div> <div class="row"> <div class="col-md-8"> <div class="card mb-4"> <div class="card-header bg-white"> <div class="row"> <div class="col-md-4"> <select class="form-select" id="buildingFilter"> <option selected>全部楼栋</option> <option>1号楼</option> <option>2号楼</option> <option>3号楼</option> </select> </div> <div class="col-md-4"> <select class="form-select" id="genderFilter"> <option selected>全部性别</option> <option>男</option> <option>女</option> </select> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="搜索学号/姓名"> <button class="btn btn-outline-secondary"><i class="bi bi-search"></i></button> </div> </div> </div> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th width="40px"></th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>当前宿舍</th> <th>班级</th> </tr> </thead> <tbody id="studentList"> <tr class="student-card"> <td><input type="checkbox" class="form-check-input"></td> <td>20250001</td> <td>张三</td> <td>男</td> <td>1-201</td> <td>计算机2101</td> </tr> <tr class="student-card"> <td><input type="checkbox" class="form-check-input"></td> <td>20250002</td> <td>李四</td> <td>男</td> <td>1-202</td> <td>计算机2101</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-white"> <h5 class="mb-0">调整到新宿舍</h5> </div> <div class="card-body"> <div class="mb-3"> <label class="form-label">选择楼栋</label> <select class="form-select" id="newBuilding"> <option>1号楼</option> <option>2号楼</option> <option>3号楼</option> </select> </div> <div class="mb-3"> <label class="form-label">选择楼层</label> <select class="form-select" id="newFloor"> <option>1层</option> <option>2层</option> <option>3层</option> </select> </div> <div class="mb-3"> <label class="form-label">选择房间</label> <select class="form-select" id="newRoom"> <option>201</option> <option>202</option> <option>203</option> </select> </div> <div class="mb-3"> <label class="form-label">调整原因</label> <select class="form-select" id="adjustReason"> <option>宿舍调换</option> <option>专业调整</option> <option>特殊需求</option> <option>其他原因</option> </select> </div> <div class="mb-3"> <label class="form-label">备注说明</label> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> </div> </div> <div class="container-fluid py-4"> <div class="row justify-content-center"> <div class="col-md-10"> <div class="row"> <!-- 调整记录板块 --> <div class="col-md-4 mb-4"> <div class="card h-100"> <div class="card-header bg-white text-center"> <h5 class="mb-0">调整记录</h5> </div> <div class="card-body"> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> 张三 从1-201调整到2-305 <span class="badge bg-secondary">2025-06-20</span> </li> </ul> </div> </div> </div> <!-- 学生列表区域 --> <div class="col-md-8"> <!-- 学生列表内容保持不变 --> </div> </div> </div> </div> </div> <!-- 学生列表区域 --> <div class="col-md-8"> <!-- 学生列表内容保持不变 --> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 增强的确认调整功能 document.getElementById('confirmAdjust').addEventListener('click', function() { const selectedStudents = document.querySelectorAll('#studentList tr input[type="checkbox"]:checked'); if(selectedStudents.length === 0) { alert('请至少选择一名学生'); return; } const newBuilding = document.getElementById('newBuilding').value; const newFloor = document.getElementById('newFloor').value; const newRoom = document.getElementById('newRoom').value; const reason = document.getElementById('adjustReason').value; if(confirm(`确定将选中的${selectedStudents.length}名学生调整到${newBuilding}${newRoom}吗？`)) { // 添加调整动画 selectedStudents.forEach(checkbox => { const row = checkbox.closest('tr'); row.classList.add('adjust-animation'); setTimeout(() => row.classList.remove('adjust-animation'), 2000); // 更新宿舍显示 const currentDormCell = row.querySelector('td:nth-child(5)'); const oldDorm = currentDormCell.textContent; currentDormCell.textContent = `${newBuilding}-${newRoom}`; // 添加到调整记录 const studentName = row.querySelector('td:nth-child(3)').textContent; const historyItem = document.createElement('li'); historyItem.className = 'list-group-item d-flex justify-content-between align-items-center'; historyItem.innerHTML = ` ${studentName} 从${oldDorm}调整到${newBuilding}-${newRoom} <span class="badge bg-secondary">${new Date().toLocaleDateString()}</span> `; document.getElementById('adjustHistory').prepend(historyItem); }); // 重置选择 document.querySelectorAll('#studentList input[type="checkbox"]').forEach(cb => cb.checked = false); document.querySelectorAll('#studentList tr').forEach(row => row.classList.remove('selected')); } }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 学生选择功能 document.querySelectorAll('#studentList tr').forEach(row => { row.addEventListener('click', function(e) { if(e.target.tagName !== 'INPUT' && e.target.tagName !== 'A') { const checkbox = this.querySelector('input[type="checkbox"]'); checkbox.checked = !checkbox.checked; if(checkbox.checked) { this.classList.add('selected'); } else { this.classList.remove('selected'); } } }); }); // 确认调整功能 document.getElementById('confirmAdjust').addEventListener('click', function() { const selectedStudents = document.querySelectorAll('#studentList tr input[type="checkbox"]:checked'); if(selectedStudents.length === 0) { alert('请至少选择一名学生'); return; } const newBuilding = document.getElementById('newBuilding').value; const newFloor = document.getElementById('newFloor').value; const newRoom = document.getElementById('newRoom').value; const reason = document.getElementById('adjustReason').value; if(confirm(`确定将选中的${selectedStudents.length}名学生调整到${newBuilding}${newRoom}吗？`)) { alert('宿舍调整成功！'); // 这里可以添加实际调整逻辑 } }); // 打印功能 document.getElementById('printList').addEventListener('click', function() { window.print(); }); </script> </body> </html> 调整页面布局结构并优化悬浮按钮对数据的更新
06-21
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i></button> </div> </div> </div> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-...
position: fixed 居中
leoly612200的博客
04-24 304
例如：<div class="content"></div> .content{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:100; }
CSS中position属性之fixed实现div居中
09-03
主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
css 固定位置居中,css3 position:fixed 固定居中的问题
weixin_28797889的博客
08-04 2668
固定定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动元素固定一般使用position:fixed，fixed表示脱离了正常的文档流，但若是此元素居中，方法如下：1.如果想使某元素居中：$ele{ margin:0 auto}margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应 marin:语法结构(1)margin:10px; 四边统一外边距(2)...
position:fixed 的元素居中显示
JaimeCheng的博客
02-21 2854
标题本身是个很简单是事，因为一般body宽度都是100%； 很久没写html，今天写一个小页面的时候突然遇到了，记录一下； body宽度我设置的是640px，所以有个fixed的元素没居中； position:fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 让其居中的css： div { position: fixed; margin: auto; ...
[css] position:fixed居中问题
程序员老狼专注开发aigc或客服系统应用
05-13 187
测试发现 ， 如果设置了left 或right ， 如果想要居中那么 left:0px; right:0px; margin:0 auto; 如果没有设置过 ， 只有bottom或top 那么它就是跟着父元素来的 ， 如果父元素居中 ， 它也居中 ...
利用属性position的属性值fixed使div在页面居中（详解）
weixin_46102597的博客
01-30 2695
首先，我们先来了解一下属性position当属性值取fixed时的作用：使对象脱离常规流，使用top，right，bottom，left等属性 以窗口为参考点 进行定位，当出现滚动条时，对象不会随着滚动。** 接下来我们看下面这个关于div的css： div{ position: fixed; left: 50%; top:50%; width: 100px; ...
css position fixed 居中,css中position:fixed实现div居中上下左右居中
weixin_34915171的博客
08-04 1515
上下左右 居中代码如下div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;}如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中，那么把 left:0; 或者 right:0; 即可下面附一个DIV 元素在浏览器窗口居中其实，实现这个效果...
css设置绝对定位居中
xinzi11243094的博客
06-06 2207
方法/步骤新建一个html文件。如图：在html文件上找&lt;body&gt;标签，在&lt;body&gt;标签中创建&lt;div&gt;标签并设置class类：&lt;div class="fixed"&gt;     fixed浮动居中&lt;/div&gt;如图：对div设置基本属性。html文件找到&lt;title&gt;标签，在这个标签后新建一个&lt;style&a
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值