西塘古镇（测试纯CSS自动水平居中）
<style>@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translateX(-50%); width: 1280px; height: 720px;background: #ddd url('https://638183.freep.cn/638183/t24/5/xtgv.jpg') no-repeat center/cover; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
.zw { position: relative; height: 720px; margin: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=494193128" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(tz);
</script>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz { position: absolute; left: 50%; transform: translateX(-50%); width: 1280px; height: 720px;background: #ddd url('https://638183.freep.cn/638183/t24/5/xtgv.jpg') no-repeat center/cover; }
#mplayer { bottom: 30px; }
#fsbtn { top: 30px; left: 30px; }
.zw { position: relative; height: 720px; margin: 30px; }
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=494193128" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" autoplay loop muted></video>
</div>
<div class="zw"></div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(tz);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖最后由 马黑黑 于 2025-4-2 21:50 编辑
原理：
帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子最好不要设置 top 值，除非你知道确切的数据（可以量）。如果不设置 top 值，它默认在文档流中它的起始位置。
但这会使得帖子脱离文档，因为绝对居中不占位。因此，帖子后面多加一个占位用的 div，它的唯一作用是占位，所以，高度应和帖子设置的相一致或大一些，还可以用 margin 设置外边距，辅助占位之用。该 div 有自己的CSS，注意查看。 理论上，这个实现机制兼容性最好，不同运行环境都可行 马黑黑 发表于 2025-4-2 21:48
原理：
帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子 ...
这个left: 50%; transform: translateX(-50%); 我认得。。{:4_173:}
之前定位小播和歌词位置的时候，让它们同时在任何位置都居中对齐。。
马黑黑 发表于 2025-4-2 21:48
原理：
帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子 ...
试了下TOP值要设到900多才能让头像完整露出来。
不过因为下移，它也完美挡住了编辑键，无法进行下一次尝试{:4_170:}
居中居的正正的。。 如果加了TOP：840px;再设margin: 130px; 这样搭配就完美了。露出头像，还不遮编辑键。。。
这两块明白怎么用了。。 新的贴子免计算居中方式之css。。。{:4_199:} 马黑黑 发表于 2025-4-2 21:48
原理：
帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子 ...
不知道这个.zw的高度设置得再大点会怎样，会让帖子的上下空档更大点吧{:4_204:} 使用绝对定位，再使用相对定位去占位。通过这个帖子，更加清楚绝对定位和相对定位的关系了{:4_187:} 花飞飞 发表于 2025-4-2 22:04
这个left: 50%; transform: translateX(-50%); 我认得。。
之前定位小播和歌词位置的时候，让 ...
是的，用过，只是用到控制帖子位置没怎么做 红影 发表于 2025-4-2 22:38
使用绝对定位，再使用相对定位去占位。通过这个帖子，更加清楚绝对定位和相对定位的关系了
定位也就是那么几种吧。
static
fixed
absolute
relative
sticky 红影 发表于 2025-4-2 22:29
不知道这个.zw的高度设置得再大点会怎样，会让帖子的上下空档更大点吧
主要是下方。上面，帖子默认在你开帖写文本的地方，它不会受到占位div的影响 花飞飞 发表于 2025-4-2 22:25
新的贴子免计算居中方式之css。。。
主要是免计算，还有，在哪儿都可以用 花飞飞 发表于 2025-4-2 22:14
试了下TOP值要设到900多才能让头像完整露出来。
不过因为下移，它也完美挡住了编辑键，无法进行下一次尝 ...
所以必须有占位 div，否则会坍塌 辛苦了！谢谢马老师创新探索分享{:4_191:} 太好了，有代码可以复制{:4_199:}谢谢无私奉献的黑黑老师！ 欣赏漂亮佳作！特效很美，老师辛苦了！谢谢创新探索分享{:4_187:} 马黑黑 发表于 2025-4-2 22:55
定位也就是那么几种吧。
static
这些都和定位有关啊，我赶紧再去复习一下{:4_187:} 马黑黑 发表于 2025-4-2 22:56
主要是下方。上面，帖子默认在你开帖写文本的地方，它不会受到占位div的影响
嗯嗯，知道了。谢谢黑黑{:4_187:}