方法一：

父級(jí)：text-alien：center;

子集：display:inline-block;

css<style>.father{text-align: center;/*position: relative;float: left;left: 50%;*/}.father>div{background-color: pink;margin-top: 10px;height: 100px;width: 200px;}.center{display: inline-block;}</style>html<div class="father"><div class="center">hello</div></div>

?

　　

?

方法二：

子集：margin:0 auto;

<style>.father{/*text-align: center;*//*position: relative;float: left;left: 50%;*/}.father>div{background-color: pink;margin-top: 10px;height: 100px;width: 200px;}.center{/*display: inline-block;*/margin: 0 auto;}</style><div class="father"><div class="center">hello</div></div>

?

　　

?

方法三：

集合float、position來(lái)完成

<style>.father{position: relative;float: left;left: 50%;}.father>div{background-color: pink;margin-top: 10px;height: 100px;width: 200px;}.center{position: relative;float: left;left: -50%;}</style><div class="father"><div class="center">hello</div></div>

　　

方法四：

用transform（css3）、position完成

<style>.father{position: relative;background: yellow;left: 50%;}.father>div{background-color: pink;margin-top: 10px;height: 100px;width: 200px;}.center{position: absolute;transform: translate(-50%, 0);}</style><div class="father"><div class="center">hello</div></div>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/liuyuweb/p/9871586.html

總結(jié)

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

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