css居中的几种方法_CSS布局中的水平居中的方法
在我們做網(wǎng)站的過程中，怎么都逃不掉居中這個話題，各種花里胡哨的，可能只需要掌握兩三個就可以完成一個網(wǎng)頁的布局了。今天就來介紹下水平居中有哪些方法。
第一種，設(shè)置當前元素水平居中，元素為block時
要讓p元素水平居中：
<body><div class="father"><p>我是block元素，我要水平居中</p></div> </body>css代碼： p{width :200px;margin: 0 auto; }margin 左右auto 對于block元素是非常好用的;（這里它的父元素（div）會被p元素撐起來，所以是有高度的）
第二種，
<body><div class="father"><p>我是block元素，我要水平居中</p> </div> </body>css代碼： .father{position: relative;height:100vh; } p{position: absolute;top:0;left:50%;transform:translateX(-50%); }使用position定位加translateX（-50%）或者margin-right(設(shè)置居中元素的寬度);
同樣是水平居中，但是這種是我比較喜歡的，很靈活,雖然可以使用margin,但是建議最好不要用margin來調(diào)整位置，因為很多情況下元素的寬度帶小數(shù)而且有時出Bug(沒有效果)，所以推薦使用translateX，不需要思考（直接設(shè)置-50%），沒有bug，舒服的一批。
但是這種設(shè)置完后父元素如果沒有其他元素支撐高度是會為0的，（有時沒多大關(guān)系）不過最好還是設(shè)置一個高度。
第三種：
css代碼，html還是上面的 .father{text-align:center;height:100vh; }是我剛學(xué)CSS時比較腦殘喜歡用的，text-align : center;簡單粗暴，進行水平居中（放在要設(shè)置居中元素的父元素上），如果單個block元素是沒問題的。但是有兩個就會失效了，必須把block元素變成inline-block才能使用；
第4種：、
.father{display:flex;height:100vh;justify-content:center; }使用flex布局，使父元素成為一個彈性盒，使用justify-content:center;即可達到居中，注意在flex布局中所有元素的都會連在一起，沒有縫隙，(所以在我們需要精確對齊時是非常有效的，不會受到縫隙的影響)，居中后元素性質(zhì)不變（還是block）但是寬度變成內(nèi)容（所有父元素中的元素都會排成一排像火車一樣）多寬它就多寬；高度和父元素高度一樣。
總結(jié)
以上是生活随笔為你收集整理的css居中的几种方法_CSS布局中的水平居中的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java将图片转byte存入数据库_Ja
- 下一篇： css div里引用em字体会变斜体_C