前端制作之純CSS實現垂直水平居中

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

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

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

2.flex-wrap屬性 　　

默認情況下的布局一般在同一行，當設置了flex-wrap屬性之后將自動將排列不下的內容進行換行。 div{   flex-wrap: nowrap | wrap | wrap-reverse; } 　　四個值分別為：nowrap(默認值)不換行、wrap向下換行、wrap-reverse向上換行。 　　

3.flex-flow屬性 　　

flex-flow屬性是以上兩種屬性的簡寫形式，默認值是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(默認值)：向左對齊。 　　

flex-end：向右對齊。 　　

center： 居中對齊。 　　

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

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

5.align-items屬性 　　

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

flex-start：垂直方向的起點對齊。 　　

flex-end：垂直方向的終點對齊。 　　

center：垂直方向的中點對齊。 　　

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

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

6.align-content屬性 　　

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

center：當容器方向子元素剛好填滿時，與垂直方向的中點對齊。 　　

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

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

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

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