實現(xiàn)垂直居中的幾種方法，不知道寬高的情況下如何實現(xiàn)元素水平垂直居中?

　　- **實現(xiàn)垂直居中的幾種方式**：

　　- 1.單行文本垂直居中：當(dāng)此標(biāo)簽高度和行高的值相等時;

　　- 2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半;}

　　- 3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}

　　- 4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}

　　- 5.彈性盒：父元素{display:flex;align-items:center;}

　　- **不知道寬高的情況下如何實現(xiàn)元素水平垂直居中**:

　　- 1.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

　　- 2.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

　　- 3.彈性盒： 父元素{display:flex;} 子元素{margin:auto;}

　　- 4.彈性盒： 父元素{display:flex;justify-content:center;align-items:center;}

　　談?wù)刦lex布局，你知道flex:110嗎

　　- flex布局：彈性盒布局(形成彈性盒后可以控制子元素在父級元素中排列位置)

　　- flex：1 1 0 是由 flex-grow:1 flex-shrink:1 flex-basis:0復(fù)合而成 也可以簡寫為flex：1

　　表示占據(jù)主軸上剩下的空間 當(dāng)子級內(nèi)容超出的時候會將當(dāng)前區(qū)域撐大

　　- flex-grow默認(rèn)值為0，當(dāng)值大于0時，當(dāng)父元素有剩余空間時當(dāng)前元素放大，父元素沒有剩余空間時，該元素不放大。

　　- flex-shrnk默認(rèn)值為1，父元素有剩余空間時，該元素不縮小，父元素沒有剩余空間時，該元素縮小。

　　- **flex-basis**相當(dāng)于width屬性。

　　談一下怎么實現(xiàn)一個橢圓,使用css

　　· 使用border-radius屬性 屬性值可以設(shè)置一個/兩個/三個/四個/八個 以下是兩種方法實現(xiàn)橢圓

　　o 第一種: width: 250px; height: 150px;background: #FFD900;border-radius: 50%

　　o 第二種: width: 250px; height: 150px;background: #FFD900;border-radius: 50% / 100% 100% 0 0;

　　脫離布局流有幾種方法?

　　- 常見的有浮動和定位

　　- 第一種:浮動布局(float)浮動一般用于讓塊級元素排成一行在同一行顯示任何元素都可浮動，如一個元素設(shè)置為浮動元素，浮動元素?zé)o論最初是什么都會變成一個行塊級元素，擁有disolay：inline-block屬性

　　- 第二種:定位布局(position) 定位中的absolute絕對定位可以讓元素脫離文檔流的 如果父級有定位屬性就相對于父級定位 如果父級沒有就會一直往上級查找直至瀏覽器

　　- 脫離文檔流布局的缺點初始位置不存在就會破壞網(wǎng)頁布局

　　更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。