CSS居中的几种方式-外链论坛 - Powered by Discuz! Archiver

fny5jt9 发表于 2024-6-30 09:44:14

CSS居中的几种方式

<h3 style="color: black; text-align: left; margin-bottom: 10px;">Grid布局的三种实现方式</h3>
办法1&2：为必须居中的元素的父级添加：
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 <p> 123 </p>
 </div>

 <style>
 .box{
 display : grid;
 align-items: center ;
 justify-items: center;
 }
 </style>
</div>
或
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 <p> 123 </p>
 </div>

 <style>
 .box{
 display : grid;
 align-items: center ;
 justify-content: center;
 }
 </style>
</div>
区别：两者虽然实现的效果一致，但浏览器渲染方式区别。运用justify-items：center，在检查元素时会发掘子项的边框是占满全部格子的；而justify-content：center，检测子项元素时边框是元素本身的体积。
办法三：为子元素添加margin：auto；
该方式与Flex布局实现居中的方式类似，利用margin吸收空白空间，使元素居中。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">Flex布局的两种实现方式：</h3>
办法一：为必须居中的元素的父级添加：使元素沿着主轴和侧轴都居中表示，从而实现水平垂直居中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 <p> 123 </p>
 </div>

 <style>
 .box{
 display:flex;
 align-items: center ;
 justify-content: center;
 }
 </style>
</div>
办法二：为子元素添加margin：auto；
该方式与Grid布局实现居中的方式类似，利用margin吸收空白空间，使元素居中。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">Table-cell布局实现居中：</h3>
为必须居中的元素的父级添加：必须为父级盒子设置宽度，否则宽度将由孩儿的内容撑开；或再设置一个盒子包裹父级盒子，设置width=100%，才能够和浏览器同宽。
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 <p> 123 </p>
 </div>

 <style>
 .box{
 width:300px;
 display:table-cell;
 vertical-align:center;
 text-align:center;
 }
 </style>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位实现居中：</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 <p> 123 </p>
 </div>

 <style>
 .box{
 position: relative;
 width:200px;
 height:200px;
 }
 p{
 position:absolute;
 left:50%;
 top:50%;
 transform: translate(-50%, -50%);
 margin:0;
 }
 </style>
</div>
重视：子项添加了绝对定位，那样必定要为父级元素添加相对定位来做为参考点。 同期，倘若无清除p标签的外边距，那样translate会将margin值计算在内，引起视觉上并无居中。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">line-height实现居中：</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
 123 
 </div>

 <style>
 .box{
 width:200px;
 height:200px;
 text-align:center;
 }
 .box::after{
 content:;
 line-height:200px;
 }
 </style></div>
利用伪元素的文本基线与容器中心对齐，line-height的值必须与容器等高，才可实现垂直居中效果。但当父级容器height不知道，或子元素内存在块级元素便没法运用。

fate 发表于 2024-9-3 02:05:03

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

j8typz 发表于 2024-9-26 14:55:13

seo常来的论坛，希望我的网站快点收录。

7wu1wm0 发表于 2024-9-28 07:35:35

谷歌外链发布 http://www.fok120.com/

7wu1wm0 发表于 2024-10-13 14:08:52

我深受你的启发，你的话语是我前进的动力。

wrjc1hod 发表于 2024-10-19 05:12:44

谷歌网站排名优化 http://www.fok120.com/

页: [1]

外链论坛's Archiver

CSS居中的几种方式