西塘古镇（测试纯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>

马黑黑

原理：

帖子绝对定位，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%); 我认得。。
之前定位小播和歌词位置的时候，让它们同时在任何位置都居中对齐。。

花飞飞

马黑黑 发表于 2025-4-2 21:48
原理：

帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子 ...

试了下TOP值要设到900多才能让头像完整露出来。
不过因为下移，它也完美挡住了编辑键，无法进行下一次尝试

居中居的正正的。。

花飞飞

如果加了TOP：840px;再设margin: 130px; 这样搭配就完美了。露出头像，还不遮编辑键。。。
这两块明白怎么用了。。

花飞飞

新的贴子免计算居中方式之css。。。

红影

马黑黑 发表于 2025-4-2 21:48
原理：

帖子绝对定位，left 50%，再用 transform: translateX(-50%) 倒回 50%，从而实现水平居中。帖子 ...

不知道这个.zw的高度设置得再大点会怎样，会让帖子的上下空档更大点吧

红影

使用绝对定位，再使用相对定位去占位。通过这个帖子，更加清楚绝对定位和相对定位的关系了

马黑黑

花飞飞 发表于 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，否则会坍塌

杨帆

辛苦了！谢谢马老师创新探索分享

清茶煮雪

太好了，有代码可以复制谢谢无私奉献的黑黑老师！

清茶煮雪

欣赏漂亮佳作！特效很美，老师辛苦了！谢谢创新探索分享

红影

马黑黑 发表于 2025-4-2 22:55
定位也就是那么几种吧。

static

这些都和定位有关啊，我赶紧再去复习一下

红影

马黑黑 发表于 2025-4-2 22:56
主要是下方。上面，帖子默认在你开帖写文本的地方，它不会受到占位div的影响

嗯嗯，知道了。谢谢黑黑