在前端日常代碼編寫中，經(jīng)常需要一些居中方式，下面有幾種常用方法，讓紅色方塊垂直水平都居中于黑色方塊里。       

 1. 利用flex彈性布局 Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。 首先是作為彈性布局的容器的屬性。　　 　　

flex-direction屬性 　　flex-direction決定了容器的方向。 div {   flex-direction: row | row-reverse | column | column-reverse; } 　　四個(gè)值分別為：row(默認(rèn)值)從左向右、row-reverse從右向左、column從上到下、column-reverse從下到上。 　　

2.flex-wrap屬性 　　

默認(rèn)情況下的布局一般在同一行，當(dāng)設(shè)置了flex-wrap屬性之后將自動(dòng)將排列不下的內(nèi)容進(jìn)行換行。 div{   flex-wrap: nowrap | wrap | wrap-reverse; } 　　四個(gè)值分別為：nowrap(默認(rèn)值)不換行、wrap向下?lián)Q行、wrap-reverse向上換行。 　　

3.flex-flow屬性 　　

flex-flow屬性是以上兩種屬性的簡寫形式，默認(rèn)值是row nowrap。 div {   flex-flow: <flex-direction> || <flex-wrap>; } 　　 　　

4.justify-content屬性 　　

justify-content屬性定義了在容器方向上的對齊方式。 div {   justify-content: flex-start | flex-end | center | space-between | space-around; } 　　

flex-start(默認(rèn)值)：向左對齊。 　　

flex-end：向右對齊。 　　

center： 居中對齊。 　　

space-between：兩端對齊，每一個(gè)子元素等距離間隔，子元素與容器邊框無間隔。 　　

space-around：每個(gè)子元素兩側(cè)的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。 　　

5.align-items屬性 　　

align-items屬性定義在垂直容器方向上的對齊方式。 div {   align-items: flex-start | flex-end | center | baseline | stretch; } 　　

flex-start：垂直方向的起點(diǎn)對齊。 　　

flex-end：垂直方向的終點(diǎn)對齊。 　　

center：垂直方向的中點(diǎn)對齊。 　　

baseline: 與第一個(gè)子元素中文字的基線對齊。 　　

stretch(默認(rèn)值)：如果子元素沒有設(shè)置高度或者高度設(shè)為auto，那么它將占滿整個(gè)容器的高度。 　　

6.align-content屬性 　　

align-content屬性定義了子元素兩種方向上的對齊方式。 div {   align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 　　flex-start：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的起點(diǎn)對齊。 　　flex-end：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的終點(diǎn)對齊。 　　

center：當(dāng)容器方向子元素剛好填滿時(shí)，與垂直方向的中點(diǎn)對齊。 　　

space-between：當(dāng)容器方向子元素剛好填滿時(shí)，垂直方向兩端對齊，子元素之間的等距離間隔。 　　

space-around：兩個(gè)方向兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 　

　stretch（默認(rèn)值）：占滿整個(gè)垂直方向。   任何一個(gè)容器都可以指定為Flex布局。 指定Flex的寫法為：display:flex 接著添加橫向居中屬性：justify-content:center 垂直居中屬性：align-items:center 即可使紅色方塊居中于黑色方塊  

 2. 利用position定位實(shí)現(xiàn)居中  先將父元素.container的position設(shè)置為relative,然后設(shè)置子元素.box的position為absolute;這樣可以使子盒子根據(jù)父盒子的位置進(jìn)行定位。 子元素.box還需設(shè)置top:0;right:0;bottom:0;left:0;margin:auto,即可居中于黑色方塊。