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

1. 利用flex彈性布局
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
首先是作為彈性布局的容器的屬性。　　
　　1.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屬性是以上兩種屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值是row nowrap。
div {
  flex-flow: <flex-direction> || <flex-wrap>;
}
　　
　　4.justify-content屬性
　　justify-content屬性定義了在容器方向上的對(duì)齊方式。
div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
　　flex-start(默認(rèn)值)：向左對(duì)齊。
　　flex-end：向右對(duì)齊。
　　center： 居中對(duì)齊。
　　space-between：兩端對(duì)齊，每一個(gè)子元素等距離間隔，子元素與容器邊框無(wú)間隔。
　　space-around：每個(gè)子元素兩側(cè)的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。
　　5.align-items屬性
　　align-items屬性定義在垂直容器方向上的對(duì)齊方式。
div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
　　flex-start：垂直方向的起點(diǎn)對(duì)齊。
　　flex-end：垂直方向的終點(diǎn)對(duì)齊。
　　center：垂直方向的中點(diǎn)對(duì)齊。
　　baseline: 與第一個(gè)子元素中文字的基線對(duì)齊。
　　stretch(默認(rèn)值)：如果子元素沒(méi)有設(shè)置高度或者高度設(shè)為auto，那么它將占滿(mǎn)整個(gè)容器的高度。
　　6.align-content屬性
　　align-content屬性定義了子元素兩種方向上的對(duì)齊方式。
div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
　　flex-start：當(dāng)容器方向子元素剛好填滿(mǎn)時(shí)，與垂直方向的起點(diǎn)對(duì)齊。
　　flex-end：當(dāng)容器方向子元素剛好填滿(mǎn)時(shí)，與垂直方向的終點(diǎn)對(duì)齊。
　　center：當(dāng)容器方向子元素剛好填滿(mǎn)時(shí)，與垂直方向的中點(diǎn)對(duì)齊。
　　space-between：當(dāng)容器方向子元素剛好填滿(mǎn)時(shí)，垂直方向兩端對(duì)齊，子元素之間的等距離間隔。
　　space-around：兩個(gè)方向兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
　　stretch（默認(rèn)值）：占滿(mǎn)整個(gè)垂直方向。
 
任何一個(gè)容器都可以指定為Flex布局。
指定Flex的寫(xiě)法為：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,即可居中于黑色方塊。