---
# System prepended metadata

title: "\U0001F3C5 Day 15 - 垂直水平置中"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 15 - 垂直水平置中

切版過程中，有時會碰到需要將內容垂直水平置中的狀況，以往實現起來會相對麻煩，如今我們可以利用 flex 技巧來快速達成。
### Flex 基本介紹
又稱 Flexbox（彈性盒子），是一種方便好用的排版語法，只需設定 `display: flex` 將區塊轉為 flex 元素，即可使用相關 flex 語法來排版，以下介紹主要對齊屬性
### justify-content
用於對齊區塊 X 軸，常用屬性值：
- center：水平置中
- space-between：貼齊父層兩側的同時，分散對齊
- flex-end：靠齊右側
### align-items
用於對齊區塊 Y 軸，常用屬性值：
- center：垂直置中
- flex-end：靠齊底部


### 題目
請試著在下方程式碼 .box 中加上 flex 相關屬性讓 logo 圖片在垂直水平置中的位置，如圖：

![](https://i.imgur.com/qWEVuCO.png)

HTML

```htmlembedded=
<div class="box">
    <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/refs/heads/main/normal/hex-logo.png" alt="logo" width="150">
</div>
```

CSS

```css=
.box{
  background-color: #e8eeea;
  width: 300px;
  height: 300px;
}
```

> 記得加上 ==CSS Reset==

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/hexschool/pen/GRxRKrP
-->

### 回報區

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | Tetsu | [Codepen](https://codepen.io/ttgchang/pen/MYwMpxg)|
| 2 |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/EajBWBg) |
| 3 |  Shawn |[Codepen](https://codepen.io/LiShang/pen/OPVepeB) |
| 4 |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/OPVepKB) |
|  5  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/NPqZjPm)|
|  6  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/myJZmyK?editors=1100) |
|  7  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/MYwMmaa?editors=1100) |
|  8  |  孟  |[Codepen](https://codepen.io/Mengru0503/pen/zxGVwvo) | 
|  9  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/OPVemNr) | 
|  10 |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/ogXrWBE) |
|  11 |  西娜  |[Codepen](https://codepen.io/Sheena-the-encoder/pen/OPVemmq) |
|  12 |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/wBaLdqL) |
|  13 |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/bNdPWrX) |
|  14 |  那個貓貓  |[Codepen](https://codepen.io/zorakao/pen/PwqrmJL) |
|  15  |  Joseph_Kyuu  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/MYwMmGb) |
|  16  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/dPoBWxw?editors=1100) |
|  17  |  地瓜  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/MYwMmGb) |
|  18  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/dPoBRoa) |
| 19   | Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/zxGVzqj?editors=1100)
|  20  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/myJZwOd?editors=1100) |
|  21  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/XJbLadw) | 
|  22  |Saika|[Codepen](https://codepen.io/saika4501/pen/MYwMvmx)|
|  23  |Sid|[Codepen](https://codepen.io/monkeybear721/pen/yyNdzYy)|
|  24  |  Eagle huang  |[Codepen](https://codepen.io/YuCi/pen/GgJbMJB) |
|  25  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/full/bNdPoRP) |
|  26  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/ByNgwgy?editors=1100) |
|  27  |  随縁  |[Codepen](https://codepen.io/anki0072011/pen/ByNgmzj) |
|  28  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/LEVKOZM) |
|  29  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/EajBbQO) |
|  30  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/ByNgmPp) |
|  31  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/qEdzxdj) |
|  32  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/RNPzQRJ) |
|  33  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/raVEJZm) |
|  34  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/yyNdvxa?editors=1100) |
|  35  |  Geno Chen  |[Codepen](https://codepen.io/kai-chen-the-sans/pen/MYwMVXV) |
|  36  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=EajBRyZ) |
|  37  |  Antonio  |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/vEOqpKy) |
|  38  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/ByNgPeR) |
|  39  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/YPXoBPE) |
|  40  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/zxGVXoV) |
|  41  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/XJbLwog) |
|  42  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/YPXobmd) |
|  43  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/OPVeebV) |
|  44  |  Chris Wang  |[Codepen](https://codepen.io/hexschool/pen/GRxRKrP) |
|  45  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/MYwNgqj) |
|  46  |  Hao  |[Codepen](https://codepen.io/Howell/pen/xbGvKMp) |
|  47  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/pvJMvoV) |
|  48  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/vEOoXvZ) |
|  49  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/yyNmbpN) |
|  50  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/dPoxzzG) |
|  51  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/LEVwQmO) |
|  52  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ogXKqgM) |
|  53  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/emNqbBP) |
|  54  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/JoYPPdX) |
|  55  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPyLmoa) |
|  56  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/RNWwGgN?editors=1100) |
|  57  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/dPYyOXX) |
|  58  |  力文  |[Codepen](https://codepen.io/liwenchiou/pen/ByoawJx) |
|  59  |  suemma  |[Codepen](https://codepen.io/suemma/pen/xbwxBRd) |
|  60  |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/QwjwjWo) |
|  61  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/NPGqjzX) |
|  62  |  B  |[Codepen](https://codepen.io/Babel777/pen/OPyyjyr) |
|  63  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/MYaaEBX) |
|  64  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/RNWrVpz) |
| 65 | water | [Codepen](https://codepen.io/wateruby/pen/PwPZBJj)|
|66| 小趴| [Codepen](https://codepen.io/papa2415/pen/jEbqmzM)|
|  67  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/myePjLr) |
|  68  |  tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/qEOaZdr) |
|  69  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/gbawMjP) |
|  70  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/KwdNqZN?editors=1100) |
|  71  |  cindy  |[Codepen](https://codepen.io/a50134/pen/NPGdZOW) | -->
|  72  |  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/ZYbXMmb) |
| 73 | 4ping | [Codepen](https://codepen.io/928Libra/pen/qEOKJWg)
|  74  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/qEOJeeX?editors=1100) |
|  75  |  PAgaNiNi  |[Codepen](https://codepen.io/PA-OTTER/pen/KwdLyBP?editors=1100)|
|  76  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/myVPwpL?editors=1100)|

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->