u1jodi1q 发表于 2024-6-30 05:22:15

css垂直居中的方式


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> <span style="color: black;">针对</span>前端<span style="color: black;">来讲</span>，用CSS实现垂直居中是<span style="color: black;">平常</span>的工作，但自从flex<span style="color: black;">显现</span>后，<span style="color: black;">由于</span>做的差不多都是移动端的页面，<span style="color: black;">大众</span>基本上都用flex了。为了方便<span style="color: black;">大众</span>写PC端样式时<span style="color: black;">能够</span>少走弯路，我把之前工作中用到过的和别人总结的垂直居中方式一并总结在<span style="color: black;">这儿</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 基本的DOM结构如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">``` js
      &lt;div class="parent"&gt;
      &lt;div id="child"&gt;&lt;/div&gt;
      &lt;/div&gt;
      ```</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">margin-top / padding-top</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 示例</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">``` js .parent { width: 300px; height: 300px; } .child { width: 100px; height: 100px; margin-top: 50px; }</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">---- <span style="color: black;">或</span> ---- .parent { width: 300px; height: 300px; padding-top: 50px; box-sizing: border-box; } .child { width: 100px; height: 100px; }</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> ```</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 兼容性</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-3c952372153957c9fdb6bc959ce715f0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 本来我是不打算写这种方式的，但笨<span style="color: black;">办法</span><span style="color: black;">亦</span>是一种<span style="color: black;">办法</span>。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">flex</h2>示例 js .parent { display: flex; height: 300px; align-items: center; } .child { width: 100px; height: 100px; }兼容性<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-ae478f65e5febaa8408c64235fdcfcc6_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> flex在移动端的兼容性都很好，<span style="color: black;">然则</span><span style="color: black;">倘若</span>要在PC端<span style="color: black;">运用</span>的话，IE 10 以下就不要<span style="color: black;">思虑</span>了，IE 10 和11 <span style="color: black;">亦</span>有<span style="color: black;">有些</span>兼容性问题<span style="color: black;">必须</span><span style="color: black;">重视</span>：<a style="color: black;">flex兼容性</a>。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位 + transform</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> 示例</p>``` js .parent { position: relative; height: 300px; } .child { width: 100px; height: 100px; position: absolute; top: 50%;


jxwysz 发表于 2024-8-20 10:41:47

同意、说得对、没错、我也是这么想的等。

星☆雨 发表于 2024-8-26 21:16:05

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。

nqkk58 发表于 2024-11-13 10:32:34

楼主的文章深得我心，表示由衷的感谢！
页: [1]
查看完整版本: css垂直居中的方式