>
>
charset
="utf-8"
>
>
title
>
>
.wrap
.wrap>div
.wrap>div:nth-child(1)
.wrap>div:nth-child(2)
.wrap>div:nth-child(3)
.wrap>div:nth-child(4)
style
>
head
>
>
class
="wrap"
>
>
1div
>
>
2div
>
>
3div
>
>
4div
>
>
5div
>
div>
body
>
html
>
flex-start： 彈性盒子元素將向行起始位置對齊。該行的第乙個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒專案與其前乙個專案對齊。
flex-end： 彈性盒子元素將向行結束位置對齊。該行的第乙個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒專案與其前乙個專案對齊。
center： 彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第乙個元素與行的主起始位置的邊距等同與最後乙個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢位）。
space-between： 彈性盒子元素會平均地分布在行裡。如果最左邊的剩餘空間是負數，或該行只有乙個子元素，則該值等效於』flex-start』。在其它情況下，第乙個元素的邊界與行的主起始位置的邊界對齊，同時最後乙個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒專案則平均分布，並確保兩兩之間的空白空間相等。
space-around： 彈性盒子元素會平均地分布在行裡，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有乙個伸縮盒專案，則該值等效於』center』。在其它情況下，伸縮盒專案則平均分布，並確保兩兩之間的空白空間相等，同時第乙個元素前的空間以及最後乙個元素後的空間為其他空白空間的一半。
浮動居中float center
今天看到了一種浮動居中方法，用float center實現li是浮動的，並且是居中的 li個數不固定，ul寬度未知 平時一般設定ul的text align center，再設定li的display，可以實現居中。下面說一下float center實現浮動居中的思路，採用的是相對定位 ul為posit...
flex無敵居中
初學flex，記錄一下flex實現無敵居中 水平垂直居中 實現某個div內部的元素水平垂直居中 樣式寫在該div上 display flex flex direction column 主軸的方向，如果內部只有乙個元素，那麼這個值可以任意取 預設為row align items center 定義專...
居中div，居中浮動的元素
定位法 position absolute 如果子級div有定義寬和高的話就可以用這個方法。注意 margin top,和margin left的值均為高和寬值的一半 margin auto法 這個也可以是定位法。用這個方法要求子級div必須設定寬的值，不然沒有效果哦 margin auto是水平垂...