另一种宽幅帖子水平居中的实现方法

马黑黑

当父元素尺寸未知（或会动态变化），子元素的尺寸也未知（或会动态改变），用 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%，即向左位移一半，就能令宽幅帖子的物理位置在浏览器视口中水平居中。

效果放在下楼。

马黑黑

马黑黑

二楼代码

1. <style>
   
2. #mama {
   
3.         left: calc(50% - 81px);
   
4.         transform: translate(-50%);
   
5.         width: 1200px;
   
6.         height: 640px;
   
7.         background: pink;
   
8.         position: relative;
   
9. }
   
10. .son {
    
11.         position: absolute;
    
12.         width: 400px;
    
13.         height: 200px;
    
14.         left: 50%;
    
15.         top: 50%;
    
16.         transform: translate(-50%, -50%);
    
17.         border: 1px solid snow;
    
18. }
    
19. </style>
    
20. 
    
21. <div id="mama">
    
22.         <div class="son"></div>
    
23. </div>

复制代码

千羽

黑黑老师的宽幅帖子居中的实现方法好像和我发帖的代码不一样，这里是用%来计算的

马黑黑

千羽 发表于 2022-11-16 21:04
黑黑老师的宽幅帖子居中的实现方法好像和我发帖的代码不一样，这里是用%来计算的

殊途同归。我的两个方法：

① margin: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px); 或 left: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px)

② 就是本帖介绍的方法

和过去常用的实数左移法，效果一样

红影

黑黑又想到一个宽幅帖子居中方法，厉害

红影

用这种百分比都不用去考虑底图自身的宽度了，真棒

马黑黑

红影 发表于 2022-11-16 21:25
用这种百分比都不用去考虑底图自身的宽度了，真棒

前面用margin也是用百分比的

千羽

马黑黑 发表于 2022-11-16 21:18
殊途同归。我的两个方法：

① margin: 120px 0 0 calc(50% - 帖子宽度的一半 - 81px); 或 left: 120px ...

嗯，黑黑老师太厉害了

红影

马黑黑 发表于 2022-11-16 21:30
前面用margin也是用百分比的

嗯，还是用百分比方便啊

马黑黑

红影 发表于 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
一般一般班里倒数第三

那你们是天才班啊，倒数第三都这么厉害

马黑黑

千羽 发表于 2022-11-17 20:13
那你们是天才班啊，倒数第三都这么厉害

都说天才班倒闭了，木有了

千羽

马黑黑 发表于 2022-11-17 20:42
都说天才班倒闭了，木有了

都成天才班的老师了

马黑黑

千羽 发表于 2022-11-17 20:44
都成天才班的老师了

老师木有学生，老师有何用

千羽

马黑黑 发表于 2022-11-17 20:46
老师木有学生，老师有何用

那就用键盘杀猪

马黑黑

千羽 发表于 2022-11-17 21:00
那就用键盘杀猪

这主意好