css水平垂直居中办法-外链论坛 - Powered by Discuz! Archiver

219mze 发表于 2024-6-30 05:58:26

css水平垂直居中办法

按照现有状况选取水平垂直居中的办法：
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、父元素定宽定高</h2>
 (1)块级元素
办法1、子元素position:relative;top:50%;left:50%;transform:translate(-50%,-50%);能够不消事先晓得父元素的宽高，就可实现居中，然则这个办法兼容性较差。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:yellow;
 }
 .child{
 width:200px;
 height:200px;
 bac公斤round:red;
 position:relative;
 top:50%;
 left:50%;
 transform: translate(-50%,-50%);
 }
</div>
办法2、绝对定位居中，子元素position:absolute;left:0;right:0;top:0;bottom:0;margin:auto；父元素position:relative;兼容性较好。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:yellow;
 position:relative;

 }
 .child{
 width:200px;
 height:200px;
 bac公斤round:red;
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;
</div>
办法3、父元素display: flex;justify-content: center;align-items: center;移动端页面经常用。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:yellow;
 display: flex;
 justify-content: center;
 align-items: center;

 }
 .child{
 width:200px;
 height:200px;
 bac公斤round:red;
 }
</div>
办法四：利用伪元素,让子元素display：inline-block；vertical-align: middle;，再让父元素的伪元素height: 100%;display: inline-block;vertical-align: middle;
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:red;
 text-align:center;
 }
 .child{
 width:200px;
 height:200px;
 bac公斤round:yellow;
 display:inline-block;
 vertical-align: middle;
 }
 .parent::before {
 content: ;
 height: 100%;
 display: inline-block;
 vertical-align: middle;
 }
</div>
（2）内联元素
办法1、跟上面的display：flex办法同样，运用flex办法块级元素能实现居中，内联元素亦能实现居中。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:red;
 display: flex;
 justify-content: center;
 align-items: center;

 }
 .child{
 bac公斤round:yellow;
 }
</div>
办法2、父元素用text-align:center;水平居中，子元素用line-height: 父元素的高度;垂直居中，这个经常用，个人觉得是除flex外最好的办法。然则要重视：内容必要是单行才可用，倘若多行就不可用了。
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
 width:400px;
 height:400px;
 bac公斤round:red;
 text-align:center;
 }
 .child{
 bac公斤round:yellow;
 line-height: 400px;
 }
</div>
办法3、父元素display:table-cell;text-align: center;vert

qxdl12345 发表于 2024-9-4 14:35:40

你说得对，我们一起加油，未来可期。

b1gc8v 发表于 2024-10-9 01:04:29

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

qzmjef 发表于 2024-10-12 17:50:36

外链发布论坛学习网络优化SEO。

wrjc1hod 发表于 5 天前

论坛是一个舞台，让我们在这里尽情的释放自己。

页: [1]

外链论坛's Archiver

css水平垂直居中办法