前端小知識 使彈性盒內部的div元素居中

不管多麼簡單的問題，總會有人遇到，總會有人不知道如何處理！

而我，就是那個給出處理辦法的小朋友！

知識無高低大小之分，只要把自己獲得的經驗分享出去，那便是一種成功了！

或許這個分享幫不到前端大牛，但是可以給前端小白提供思路！

或許有些人說這麼簡單的東西，還需要分享出來嗎？這不是騙流量嗎？

不好意思，再簡單的東西，那都是經驗，你知道卻不分享出來，那麼請問你有什麼資格去評判別人呢？

下面給大家兩張圖作為示例：

最外層是橙色div，橙色div內部包含了：左邊藍色div、右邊綠色div

可以看到他們都是現在對齊頂部的，而我們的效果是想讓他們垂直居中

那要怎麼做呢？

下面這兩個css屬性就可以幫到你：

display

: flex;
align-items
: center;

實現的效果如下：

這個就是我們想要的效果了，今天的內容也接近了尾聲

還是那句話，不管知識高低，只要分享出來，那你就已經成功了

希望大家可以多多分享自己的經驗

有時候你可能覺得很簡單的東西，在初學者看來還是比較困難的

你只要分享出來了，他們遇到相同的問題，看到你發的帖子後肯定會很快地解決！

這難道不是一種成就感嗎？

感謝所有願意分享自己知識的大佬們，你們分享的不是知識，而是財富！

同時也希望各位有學習到一些東西的話，幫他們點乙個贊，這也是對他們的肯定和鼓勵！

這樣才會促使所有人分享自己的知識和經驗，你也會從中得到很大一筆財富！

前端HMTL彈性盒子display小知識

display none 此元素不被顯示。display block 此元素顯示為塊級元素，支援寬高，獨佔一行。display inline 此元素為內聯元素，不支援寬高，不獨佔一行。display table 此元素作為塊級 來顯示。display flex 此元素為彈性盒模型 display l...

前端容易忽略的零散小知識

1.js中沒有私有成員的概念，不過在函式中有私有變數。2.css檔案的載入不受跨域限制，canvas中使用drawimage貼圖會受跨域限制。3.在 ecmascript6 中，promise的狀態有三種 pending 進行中 fulfilled 已成功 和 rejected 已失敗 除了非同步操...

前端小知識點 外邊距疊加的幾種情況

外邊距摺疊的幾種情況 1 當乙個元素出現在另乙個元素上面時，第乙個元素的底外邊距和第二個元素的頂外邊距發生疊加，效果圖如下 ps 這裡的元素特質塊級元素，inline元素豎向margin無效，display為inline block的元素觸發了bfc也不會出現疊加，input，img之類的行內替換元...