CSS居中对齐、-天涯论坛 - Powered by Discuz! Archiver

nykek5i 发表于 2024-6-30 09:54:04

CSS居中对齐、

<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文将讨论可用于居中对齐元素的6种CSS技术（<span style="color: black;">根据</span>最佳实践排序），以及每一种技术最适合应用的场景。<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;">.center类<span style="color: black;">表率</span>要居中对齐的元素</p>.parent类<span style="color: black;">表率</span>其父元素。<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. <span style="color: black;">运用</span>变换（Transform）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么时候用：</p>当元素的宽度和高度未知时；卡片式弹出框中有多个子元素，其中一个焦点元素<span style="color: black;">位置于</span>中心。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个思路是<span style="color: black;">运用</span>绝对定位——top和left 50％，<span style="color: black;">而后</span>应用负变换。top和left中<span style="color: black;">运用</span>的值<span style="color: black;">按照</span>父元素的尺寸解析，而translate<span style="color: black;">办法</span>中的值<span style="color: black;">按照</span>元素本身的尺寸解析。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   }</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. <span style="color: black;">运用</span>Flex</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么时候用：</p>当有一个或多个元素要居中时；当子元素是动态的并且<span style="color: black;">体积</span>未知时；当有一行项目<span style="color: black;">必须</span>像页脚<span style="color: black;">同样</span>居中时。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个思路是使父容器<span style="color: black;">作为</span>flexbox并<span style="color: black;">运用</span>flex属性将元素沿水平和垂直方向居中，如下所示。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   }
</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>只需添加以下代码行：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">flex-direction: column;
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. <span style="color: black;">运用</span>负边距</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;">这个思路是再次<span style="color: black;">运用</span>类似于变换技术的绝对定位，但应用的是元素宽度和高度一半的负边距而不是平移。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">$w: 200px; /* SCSS 变量 */
   $h: 100px; /* SCSS 变量 */
   .center {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px -100px; /* Negative margin of half the
   width and heigh */t

   }</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>calc()属性，如下所示：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(#{$h} / 2) - 一半高度</p>(#{$h} / 2) * -1) - 一半高度的负值<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>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. <span style="color: black;">运用</span>网格（Grid）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么时候用：</p>当<span style="color: black;">仅有</span>一个子元素<span style="color: black;">必须</span>居中时。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个思路是创建一个网格容器并将边距设置为auto。在非网格容器中，当margin设置为auto时，margin-top和bottom取值为0。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span>，在网格容器中，margin-top和bottom平均分配可用空间，从而使元素居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   display: grid;
   }
   .center {
   margin: auto;
   }</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>是：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   display: grid;
   place-items: center;
   }
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. <span style="color: black;">运用</span>填充（Padding）</h2>
<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>是可行的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么时候用：</p>当父元素的高度已知<span style="color: black;">或</span>固<span style="color: black;">按时</span>；<span style="color: black;">其中</span>心元素的高度为弹性可变时。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个思路是为已知固定高度的容器设置固定的垂直填充，并<span style="color: black;">准许</span>子元素占据最大高度和自动边距。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
   height: 600px; //Fixed height
   padding: 200px 0; //Fixed vertical padding
   }
   .center{
   margin: 0 auto;
   height: 100%; // Child takes max height
   }</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">6. <span style="color: black;">运用</span>表格单元格</h2>
<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>值得借鉴。并且，它确实<span style="color: black;">亦</span>是可行的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个思路是<span style="color: black;">运用</span>display强制父级表现得像</p>

j8typz 发表于 2024-10-2 04:11:12

感谢你的精彩评论，为我的思绪打开了新的窗口。

4zhvml8 发表于 2024-10-21 07:02:34

你的话深深触动了我，仿佛说出了我心里的声音。

nykek5i 发表于 2024-10-23 21:21:19

软文发布论坛开幕式圆满成功。 http://www.fok120.com

页: [1]

天涯论坛's Archiver

CSS居中对齐、