```
<div class="modal-wrapper">
<span class="modal">單行文字水平垂直居中</span>
</div>
```
```
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.modal {
overflow: hidden;
background-color: #fff;
border-radius: 10px;
font-size: 16px;
}
```
```
// 1. flex 布局
.modal-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
```
```
// 2. 絕對定位 + transform
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
```
- 第一章:移動開發入門
- 第一節:概述
- 第二節:基礎概念
- 第一課時:像素
- 第二課時:視口
- 第二章:Flex 布局
- 第一節:概述
- 第二節:容器屬性
- 第一課時:flex-direction 屬性
- 第二課時:flex-wrap 屬性
- 第三課時:flex-flow 屬性
- 第四課時:justify-content 屬性
- 第五課時:align-items 屬性
- 第六課時:align-content 屬性
- 第三節:項目屬性
- 第一課時:order 屬性
- 第二課時:flex-grow 屬性
- 第三課時:flex-shrink 屬性
- 第四課時:flex-basis 屬性
- 第五課時:flex 屬性
- 第六課時:align-self 屬性
- 第四節:Flex 實例
- 第一課時:常見頁面布局
- 第三章:響應式布局
- 第一節:概述
- 第二節:媒體查詢
- 第一課時:概述
- 第二課時:響應式設計
- 第三節:柵格系統
- 第一課時:概述
- 第二課時:案例分析
- 第三課時:Bootstrap 簡介
- 第四節:響應式案例
- 第一課時:三星首頁
- 第四章:移動端適配
- 第五章:移動端事件
- 第一節:概述
- 第二節:touch 事件
- 第三節:觸摸事件對象
- 第四節:其他事件
- 第五節:移動端幻燈片
- 第六章:移動端常見問題
- 第一節:瀏覽器兼容性
- 第二節:移動端動畫
- 第三節:300ms 延遲
- 第四節:文字溢出省略
- 第五節:水平居中和垂直居中
- 第七章:項目案例
- 第一節:美團外賣
- 第一課時:首頁
- 第二課時:訂單頁面
- 第三課時:我的頁面
- 第四課時:詳情頁面
- 第五課時:購物車頁