另一种宽幅帖子水平居中的实现方法
本帖最后由 马黑黑 于 2022-11-16 20:41 编辑当父元素尺寸未知（或会动态变化），子元素的尺寸也未知（或会动态改变），用 calc(50% - 子元素的一半px) 方法令子元素居中就没有依据，此时，仍然有多重方法令子元素水平居中，这里要介绍的不是常规的方法，是 left + transform: translate() 的结合使用：
left: 50%;
transform: translateX(-50%);
如果同时需要垂直居中，则：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
这个令子元素居中的实现方法，可以应用到论坛里的宽幅帖子。试看以下实例代码：
<style>
#mama {
left: calc(50% - 81px);
transform: translate(-50%);
width: 1200px;
height: 640px;
background: pink;
position: relative;
}
</style>
<div id="mama"></div>
left 值之所以使用 calc() 函数进行计算，是因为要将帖子正文左边栏计算在内，它和帖子正文合起来是一个水平居中的整体，尺寸为 162 px，故要减去一半即 81 px。然后，和前面介绍的原理一样，用 transform 的 translate 再水平位移 -50%，即向左位移一半，就能令宽幅帖子的物理位置在浏览器视口中水平居中。
效果放在下楼。
本帖最后由 马黑黑 于 2022-11-16 20:48 编辑 <br /><br /><style>
#mama {
left: calc(50% - 81px);
transform: translate(-50%);
width: 1200px;
height: 640px;
background: pink;
position: relative;
}
.son {
position: absolute;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid snow;
}
</style>
<div id="mama">
<div class="son"></div>
</div> 二楼代码
<style>
#mama {
left: calc(50% - 81px);
transform: translate(-50%);
width: 1200px;
height: 640px;
background: pink;
position: relative;
}
.son {
position: absolute;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid snow;
}
</style>
<div id="mama">
<div class="son"></div>
</div>
黑黑老师的宽幅帖子居中的实现方法好像和我发帖的代码不一样，这里是用%来计算的{:4_203:} 千羽 发表于 2022-11-16 21:04
黑黑老师的宽幅帖子居中的实现方法好像和我发帖的代码不一样，这里是用%来计算的
殊途同归。我的两个方法：
① margin: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px); 或 left: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px)
② 就是本帖介绍的方法
和过去常用的实数左移法，效果一样 黑黑又想到一个宽幅帖子居中方法，厉害{:4_187:} 用这种百分比都不用去考虑底图自身的宽度了，真棒{:4_199:} 红影 发表于 2022-11-16 21:25
用这种百分比都不用去考虑底图自身的宽度了，真棒
前面用margin也是用百分比的 马黑黑 发表于 2022-11-16 21:18
殊途同归。我的两个方法：
① margin: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px); 或 left: 120px ...
嗯，黑黑老师太厉害了{:4_187:} 马黑黑 发表于 2022-11-16 21:30
前面用margin也是用百分比的
嗯，还是用百分比方便啊{:4_187:} 红影 发表于 2022-11-16 21:53
嗯，还是用百分比方便啊
百分比是不确定尺寸时用，很方便 马黑黑 发表于 2022-11-16 22:33
百分比是不确定尺寸时用，很方便
就算能确定尺寸也可以用，毕竟不需要去算了啊。 红影 发表于 2022-11-16 22:36
就算能确定尺寸也可以用，毕竟不需要去算了啊。
也是，懒人的福音 千羽 发表于 2022-11-16 21:34
嗯，黑黑老师太厉害了
一般一般班里倒数第三 马黑黑 发表于 2022-11-16 22:41
一般一般班里倒数第三
那你们是天才班啊，倒数第三都这么厉害{:4_203:} 千羽 发表于 2022-11-17 20:13
那你们是天才班啊，倒数第三都这么厉害
都说天才班倒闭了，木有了 马黑黑 发表于 2022-11-17 20:42
都说天才班倒闭了，木有了
都成天才班的老师了{:4_181:} 千羽 发表于 2022-11-17 20:44
都成天才班的老师了
老师木有学生，老师有何用 马黑黑 发表于 2022-11-17 20:46
老师木有学生，老师有何用
那就用键盘杀猪{:4_173:} 千羽 发表于 2022-11-17 21:00
那就用键盘杀猪
这主意好
页:
[1]
2