方法一：

父級：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來完成

<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>

　　

轉載于:https://www.cnblogs.com/liuyuweb/p/9871586.html

總結

以上是生活随笔為你收集整理的css内容居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。