1.絕對定位，left 50%, top 50%, margin-left, margin-top 各-50%
~~~
div {
? ?position:absolute;
? ?left:50%;
? ?top:50%;
? ?margin-left:-50%;
? ?margin-top:-50%
}
~~~
2.絕對定位，top,left 50%, transform: translate(-50%, -50%)
~~~
div {
? ?position:absolute;
? ?left:50%;
? ?top:50%;
? ?transform: translate(-50%, -50%);
}
~~~
3.絕對定位，top,bottom,left,right都為0，margin設為auto
~~~
.parent {
position: relative;
}
.child {
position: absolute;
? ?top: 0;
? ?bottom: 0;
? ?left: 0;
? ?right: 0;
? ?margin: auto;
}
~~~
4.flex布局，display:flex, justify-content,align-items都設為center
~~~
.parent {
? ?width: ?200px;
? ?height: ?200px;
? ?background-color: pink;
? ?display: ?flex;
? //當 flex 橫向排列時，align-item 指的是垂直方向
? ?align-items: ?center;
? //當 flex 橫向排列時，justify-content 指的是橫向方向
? ?justify-content: ?center;
}
~~~
5.grid布局，父元素設為display:grid,子元素 margin: auto
~~~
.box {
? ?width: 200px;
? ?height: 200px;
? ?border: 1px solid red;
? ?display: grid;
}
.children-box {
? ?width: 100px;
? ?height: 100px;
? ?background: yellow;
? ?margin: auto;
}
~~~
6.table-cell方法：父元素display: table-cell, 子元素display改成inline-block，或者margin:auto
~~~
.box {
? ?width: 200px;
? ?height: 200px;
? ?border: 1px solid red;
? ?display: table-cell;
? ?text-align: center;
? ?vertical-align: middle;
}
.children-box {
? ?width: 100px;
? ?height: 100px;
? ?background: yellow;
? ?display: inline-block;// 可以換成margin: auto;
}
~~~
- 空白目錄
- 1. css選擇器
- 1.1 基礎選擇器
- 1.2 偽類
- 1.3 first-child與:first-of-type的區別
- 1.4 nth-child(:not())與nth-of-type(:not())
- 1.5 屬性選擇器
- 2. html標簽分類&css樣式繼承
- 2.1 html標簽分類
- 2.2 樣式繼承
- 2.3 font
- 3. css動畫
- 1. transition
- 2. animation
- 4. 布局位置方面
- 4.1 實現圖片左右垂直居中
- 4.2 父元素中第一個子元素margin-top無效問題
- 4.3 position定位
- 5. 關于浮動
- 5.1 浮動的呈現效果
- 5.2 清除浮動的三種方式
- 5.3 inline-block與block浮動的對比
- 6. 彈性布局
- 7. border
- 7.1 添加border不影響盒子大小的三種方式
- 7.2 利用border畫三角形
- 8. css預處理--sass
- 8.1 變量
- 8.2 嵌套
- 8.3 導入SASS文件
- 8.4 靜默注釋
- 8.5 混合器@mixin
- 8.6 繼承@extend
- 8.7.function
- ! element語法
- 9. grid 布局
- 10. filedset 使用
- css面試題
- 1.題目匯總
- 2.回流（重排）和重繪
- 3.瀏覽器渲染流程
- 4.水平垂直居中
- 5.flex布局