## 使用css方法父盒子設置
```
.father{ 父元素
background-color:#222;
width: 600px;
height: 600px;
display: table-cell; 此元素會作為一個表格單元格顯示(類似 <td> </th>)
text-align: center;
vertical-align:middle; 設置元素的垂直對齊方式,middle指將此元素放在父元素中部
}
.son{
background-color:#555;
width: 300px;
height: 300px;
display: inline-block; 準換為行內快元素
vertical-align: middle;
}
```
## 使用css3的transform
原理,向將子元素相對于夫元素進移動,然后將元素相對于自己進行移動。
那左上角來看,假如一個夫元素(10,8),子元素(6,4)從左上角來看,先變為5,4然后變為(2,2)
```
.father{
background-color:#222;
width: 600px;
height: 600px;
position: relative; /*規定元素的定位類型,生成相對定位的元素(子絕父相),相對于其正常位置進行的定位*/
}
.son{
background-color:#555;
width: 300px;
height: 300px;
transform: translate(-50%,-50%); /*css3屬性,向屬性應用2d或3d轉換,該屬性允許我們對元素進行旋轉,縮放,移動或傾斜。translate(x,y),將元素相對于自己的長和寬進行相應的移動*/
position: absolute; /*生成絕對定位,生成相對于static定位的第一個元素進行定位*/
top: 50%;
left: 50%;
}
```
- 怎么將元素水平垂直居中
- 實現元素水平居中
- position幾個屬性的作用
- px,em,rem的區別
- BFC
- box-sizing, transition, translate 分別是什么
- 選擇器的優先級
- css3選擇器有那些
- iframe的作用
- 導航欄在chrome中完好,在IE中有問題。
- CSS3新特性有那些
- xhtml和html的區別
- css引入方式有哪些,link和@import的區別是
- 標簽上的title于alt屬性的區別是什么
- css reset的作用和用途
- css sprites,如何使用
- 清除浮動的幾種方式
- z-index的工作原理及適用范圍
- 設計一套方案,適應不同的分辨率,有那些方法可以實現
- 漸漸增強和優雅降級的區別
- 改變元素的外邊距用什么屬性?改變元素的內填充用什么屬性
- 在新窗口打開連接的方法是
- 頁面布局中得而結構和表現分離,結構是什么?表現是什么
- 簡述對web語義化的理解
- .html文件中的DOCTYPE是什么?有什么用
- css選擇器的種類有幾種?css選擇器的優先級是怎么定義的
- display:none;與visibility:hidden;的區別是什么
- 文字溢出省略