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

1. 利用flex彈性布局
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
首先是作為彈性布局的容器的屬性。　　
　　1.flex-direction屬性
　　flex-direction決定了容器的方向。
div {
  flex-direction: row | row-reverse | column | column-reverse;
}
　　四個值分別為：row(默認(rèn)值)從左向右、row-reverse從右向左、column從上到下、column-reverse從下到上。
　　2.flex-wrap屬性
　　默認(rèn)情況下的布局一般在同一行，當(dāng)設(shè)置了flex-wrap屬性之后將自動將排列不下的內(nèi)容進行換行。
div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
　　四個值分別為：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：兩端對齊，每一個子元素等距離間隔，子元素與容器邊框無間隔。
　　space-around：每個子元素兩側(cè)的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。
　　5.align-items屬性
　　align-items屬性定義在垂直容器方向上的對齊方式。
div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
　　flex-start：垂直方向的起點對齊。
　　flex-end：垂直方向的終點對齊。
　　center：垂直方向的中點對齊。
　　baseline: 與第一個子元素中文字的基線對齊。
　　stretch(默認(rèn)值)：如果子元素沒有設(shè)置高度或者高度設(shè)為auto，那么它將占滿整個容器的高度。
　　6.align-content屬性
　　align-content屬性定義了子元素兩種方向上的對齊方式。
div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
　　flex-start：當(dāng)容器方向子元素剛好填滿時，與垂直方向的起點對齊。
　　flex-end：當(dāng)容器方向子元素剛好填滿時，與垂直方向的終點對齊。
　　center：當(dāng)容器方向子元素剛好填滿時，與垂直方向的中點對齊。
　　space-between：當(dāng)容器方向子元素剛好填滿時，垂直方向兩端對齊，子元素之間的等距離間隔。
　　space-around：兩個方向兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
　　stretch（默認(rèn)值）：占滿整個垂直方向。
 
任何一個容器都可以指定為Flex布局。
指定Flex的寫法為：display:flex
接著添加橫向居中屬性：justify-content:center
垂直居中屬性：align-items:center
即可使紅色方塊居中于黑色方塊

2. 利用position定位實現(xiàn)居中

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