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

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

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

　　- 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;}

　　- **不知道寬高的情況下如何實(shí)現(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布局：彈性盒布局(形成彈性盒后可以控制子元素在父級(jí)元素中排列位置)

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

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

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

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

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

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

　　· 使用border-radius屬性 屬性值可以設(shè)置一個(gè)/兩個(gè)/三個(gè)/四個(gè)/八個(gè) 以下是兩種方法實(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;

　　脫離布局流有幾種方法?

　　- 常見的有浮動(dòng)和定位

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

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

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

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