行內(nèi)元素

1、水平居中

• text-align:center;

<div class="parent"><span class="child">content</span> </div> .parent{background-color:red;text-align:center; }

• fit-content; .parent{background-color:red;width:fit-content; }

2、垂直居中

• line-height(單行文本）

.parent{height:200px;line-height:200px;background-color:red; }

塊級(jí)元素

1、水平居中

• margin:0 auto;

<div class="parent"><div class="child"></div> </div> .parent{background-color:red; } .child{width:100px;margin:0 auto;background-color:blue; }

2、水平垂直居中

• 定位

.parent{position:relative;height:200px;background-color:red; } .child{weight:100px;height:100px;position:absolute;background:blue;left:calc(50%-50px);top:calc(50%-50px); }

?

.parent{position:relative;height:200px;background-color:red; } .child{weight:100px;height:100px;position:absolute;background:blue;left:50%;top:50%;margin-top:-50px;margin-left:-50px; }

• 定位+transform

.parent{position:relative;height:200px;background-color:red; } .child{position:absolute;background:blue;left:50%;top:50%;transform:translate(-50%,-50%); }

• 定位+margin

.parent{position:relative;height:200px;background-color:red; } .child{width:100px;height:100px;position:absolute;left:0;right:0;top:0;botttom:0;margin:auto;background:blue; }

• padding

.parent{padding:20px;background-color:red; } .child{height:200px;background:blue; }

• flex

.parent{height:200px;display:flex;align-items:center; //垂直居中justify-content:center; //水平居中background-color:red; } .child{width:100px;height:100px;background-color:blue; }

• 偽元素

.parent{height:200px;text-align:center;background-color:red; } .child{width:100px;height:100px;display:inline-block;vertical-align:middle;background-color:blue; } .parent::before{content:"";width:20px;height:200px;display:inline-block;vertical-align:middle;background-color:yellow; }

• calc（寬高相等） .parent{width:600px;height:600px;background-color:red; } .child{width:100px;height:100px;padding:calc((100%-100px)/2);background-clip:content-box;background-color:blue; }

  ?

?

總結(jié)

以上是生活随笔為你收集整理的css居中方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。