居中，在網頁web開發的應用場景是非常廣泛的，在很多時候居中的設計會更顯得美觀大方，同時在ui設計中也是很常用的布局手法。所以在學習css布局中，學會居中是必不可少的功課，下面我就簡單的介紹在開發中經常用到的居中方法。
注： 以下方法暫不考慮ie瀏覽器相容的問題。
1. 字型垂直居中
h2style>
body>
2. 設定margin的值為auto
如果想要乙個固定寬高的盒子針對父盒子進行水平居中，可以使用margin的屬性，只要設定子盒子的margin-left和margin-right的值為auto,盒子就會自動居中。
div .box
style>
class="box">
盒子居中
div>
body>效果圖：
3. 使用子絕父相的方式進行居中
此時如果設計有垂直需求，使用margin: 0 auto的方式就滿足不了需求了。我們可以使用絕對定位和相對定位的方式來進行居中，父盒子設定：position: relative，子盒子設定，positon: absolue, 然後設定子盒子的left: 50%, top: 50%, magin-left: (等於負的自身盒子長度的一半)，margin-top: (等於負的自身盒子的高度的一半)；
html,body
.big-box
.box
style>
class="big-box">
class="box">
盒子居中
div>
div>
body>效果圖：
4. 使用transform方法進行居中
在使用margin的方式進行居中時，需要知道盒子自身的寬高才可以設定屬性，失去了**設計的靈活性。css3新增了乙個transform的屬性，可以用它來代替margin的方法，在子絕父相的前提下，增加transform:translatex(-50%) translatey(-50%);這行**即可。
html,body
.big-box
.box
style>
class="big-box">
class="box">
transform
盒子居中
div>
div>
body>效果圖：
5. 使用flex布局實現居中
如果不考慮瀏覽器相容的問題，使用flex布局來居中是非常方便，只需要加兩行**即可實現。在父盒子新增display: flex，用來宣告flex布局，然後設定：justify-content: center， 該屬性可以實現主軸水平居中；align-items: center ，該屬性可以實現側抽垂直居中。可以根據需求進行選擇。
html,body
.big-box
.box
style>
head>
class="big-box">
class="box">
flex布局
盒子居中
div>
div>
body>效果圖：
6. 快速定位到瀏覽器中心點
有時候我們想快速地將盒子定位在瀏覽器的中心點的位置上，如：常用的快取動畫、過渡動畫，等等。此時我們可以用子絕父相結合margin的屬性來進行居中。只需要在子盒子中設定如下屬性即可：left: 0; right: 0;top: 0; bottom: 0; 最後設定 margin: auto;就可以了。
html,body
.big-box
.box
style>
head>
class="big-box">
class="box">
瀏覽器中心點
盒子居中
div>
div>
body>
html>效果圖：
常用的css居中布局方法就先介紹到這裡了，我想學會這6種方法已經滿足日常開發中使用了。
css居中布局方法
margin 0 auto 也就是將margin left和margin right屬性設定為auto，從而達到水平居中的效果。text align center center 利用padding和background clip配合實現div的水平垂直居中 parent children 通過bac...
CSS布局 居中方法
在web頁面布局中居中是我們常遇到的情況，而居中分為水平居中與垂直居中 文字的居中 css中對文字的居中做的非常友好，我們是需要text align,line height 兩個屬性就可以控制文字的水平以及垂直居中 head style type text css text style head b...
css label 居中布局 CSS居中的方法總結
css水平和垂直居中在開發中經常用到，在此加以總結。水平居中方法 1.行內元素水平居中，設定父元素的text align center。center box 常用的行內元素有a abbr b br em input label select span strong sub sup textarea等...