---
# System prepended metadata

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

---

---
tags: 網頁切版直播班 - 2023 夏季班
---


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

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

HTML

```htmlembedded=
<div class="box">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" 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  答案 |
| -------- | -------- | -------- |
| 0 |博派變形金剛#0959|[Codepen](https://codepen.io/chan-chen/pen/RwqMpBe)|
|  1 |     billy_ti     |          [Codepen](https://codepen.io/Ti-Show/pen/ExOoBOg)|
|  2  |     Ann Chou     |        [Codepen](https://codepen.io/annchou_illu/pen/BaGJgqG)        |
|  3  |      Eden.C      |           [Codepen](https://codepen.io/iseden/pen/wvQpLYR)           |
|  4  |      Amelia      |        [Codepen](https://codepen.io/Amelia-chin/pen/poQpXQz)         |
|  5  |      Berlin      |          [Codepen](https://codepen.io/3qberlin/pen/jOQYjXj)          |
|  6  |       m_m        |         [Codepen](https://codepen.io/minnn7716/pen/xxQpoMq)          |
|  7  |       AYA        |         [Codepen](https://codepen.io/NoNameNote/pen/ZEmvdmG)         |
|  8  |     .icesam      |           [Codepen](https://codepen.io/icesam/pen/qBQpzvj)           |
|  9  |     townyuan     |          [Codepen](https://codepen.io/townyuan/pen/oNQprOG)          |
| 10  |    ryan.chou     |          [Codepen](https://codepen.io/csw8524/pen/jOQYjRg)           |
| 11  |     Moreene      |          [CodePen](https://codepen.io/Moreene/pen/mdQpZgK)           |
| 12  |        WA        |           [CodePen](https://codepen.io/ldddl/pen/zYMpVVo)            |
| 13  |       awei       |          [CodePen](https://codepen.io/hong-wei/pen/RwqxzmJ)          |
| 14  |        Yu        |        [Codepen](https://codepen.io/yuch3n_chen/pen/QWJaXRe)         |
| 15  |      銀光菇      |       [Codepen](https://codepen.io/genesynthesis/pen/VwVyJJQ)        |
| 16  |     Morning      |   [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/poQpXMv)    |
| 17  |     pinyi_9      |           [Codepen](https://codepen.io/Wpypy/pen/YzRYmKL)            |
| 18  |   Atsushi#6888   | [Codepen](https://codepen.io/atsushi-amuro/pen/PoxEMYX?editors=1100) |
| 19  |   Rochel#4754    |       [Codepen](https://codepen.io/rochelwang1205/pen/BaGJXyb)       |
| 20  |    murphy1665    |           [Codepen](https://codepen.io/icephy/pen/NWEXQqQ)           |
| 21  |    ning_bobo     |          [Codepen](https://codepen.io/ninghsu/pen/YzRYmWj)           |
| 22  |   cest_jessie    |       [Codepen](https://codepen.io/itsjessiechen/pen/yLQpmaO)        |
| 23  |    runweiting    |         [Codepen](https://codepen.io/weiting14/pen/JjeMgKO)          |
| 24  |       Long       |           [Codepen](https://codepen.io/Loonng/pen/GRwyVWz)           |
| 25  |     kuanju27     |         [Codepen](https://codepen.io/Eero-Chiao/pen/GRwyVme)         |
| 26  |     zhu.lin      |       [Codepen](https://codepen.io/codepenplayer/pen/JjeMgJp)        |
| 27  |    dodo_6666     |         [Codepen](https://codepen.io/MissDouble/pen/GRwyVQa)         |
| 28  |    xuan#0880     |          [Codepen](https://codepen.io/xuan0915/pen/yLQpmKg)          |
| 29  |    lychee_kk     |          [Codepen](https://codepen.io/kakakala/pen/MWzrNGp)          |
| 30  |     meowmeow     |          [Codepen](https://codepen.io/snow1224/pen/dyQJxJq)          |
| 31  |       Tami       |     [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/mdQpNKY)      |
| 32  |     0naomi0      |          [Codepen](https://codepen.io/0Naomi0/pen/LYXewJJ)           |
| 33  |   kimlemon0720   |    [Codepen](https://codepen.io/znohmess-the-builder/pen/KKrZORg)    |
| 34  |   Tina02#2691    |    [Codepen](https://codepen.io/chjitlox-the-bashful/pen/eYQyqLE)    |
| 35  |     Vic_Liou     |       [Codepen](https://codepen.io/allenliou-java/pen/XWyVvoV)       |
| 36  |    墨墨#4571     |          [Codepen](https://codepen.io/momof2e/pen/zYMpgbW)           |
| 37  |    Kimi #9564    |          [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)          |
| 38  |    Lianne._.     |   [Codepen](https://codepen.io/Elaina-L/pen/poQazVV?editors=1100)    |
| 39  |       小夏       |  [Codepen](https://codepen.io/michaelhsia/pen/JjepPBg?editors=1100)  |
| 40  |     Ting.66      |    [Codepen](https://codepen.io/Ting66/pen/qBQxWVz?editors=1100)     |
| 41  |     ovo.yun      |      [Codepen](https://codepen.io/yun-the-scripter/pen/zYMROXQ)      |
| 42  |      .dtou       |    [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/WNYMeVJ)    |
| 43  |     hao2485      |         [Codepen](https://codepen.io/Seanfeb16/pen/RwqQwwp)          |
| 44  |       Uli        |          [Codepen](https://codepen.io/uli1313/pen/OJaQJXQ)           |
| 45  |     ann6212      |   [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/oNQENzz)    |
| 46  |       Cura       |    [Codepen](https://codepen.io/curalin/pen/wvQyvzj?editors=1100)    |
| 47  |      shcopy      |           [Codepen](https://codepen.io/shcopy/pen/jOQZOqe)           |
| 48  |    jacky7035     |          [Codepen](https://codepen.io/adens123/pen/OJaQJRQ)          |
| 49  |    莉塔#8500     |          [Codepen](https://codepen.io/RitaWeng/pen/YzRezZV)          |
| 50  |  yunhsinnnnnnn   |         [Codepen](https://codepen.io/yun___hsin/pen/VwVQwbp)         |
| 51  |       MKL        |          [Codepen](https://codepen.io/Code-My/pen/bGQLGRx)           |
| 52  |       依依       |   [Codepen](https://codepen.io/Rita-Yang/pen/gOQvORv?editors=1100)   |
| 53  |       rjjq       |            [Codepen](https://codepen.io/rjjq/pen/qBQxBwj)            |
| 54  |      Marvin      |           [Codepen](https://codepen.io/chi-Wu/pen/NWEyPqZ)           |
| 55  |      Martin      |        [Codepen](https://codepen.io/markyourpage/pen/wvQywqJ)        |
| 56  |    adele6199     |     [Codepen](https://codepen.io/codepen-io-winnie/pen/xxQYbpY)      |
| 57  |    阿富#0389     |        [Codepen](https://codepen.io/spring40747/pen/NWEyPYq)         |
| 58  |     liam9930     |    [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/QWJQwrN)    |
| 59  |    Paul#7426     |         [Codepen](https://codepen.io/paul-1997/pen/MWzQwyr)          |
| 60  |   Cosmos#9210    |         [Codepen](https://codepen.io/violet7755/pen/bGQLdLR)         |
| 61  |       狸貓       |         [Codepen](https://codepen.io/tanuki320/pen/MWzQwBq)          |
| 62  |       辣椒       |        [Codepen](https://codepen.io/chilichen118/pen/vYQdObK)        |
| 63  |      ROGER       |   [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/QWJQjxo)    |
| 64  |     ming0712     |        [Codepen](https://codepen.io/StevenHuang/pen/MWzQKoj)         |
| 65  |     soniawu      |           [Codepen](https://codepen.io/YUJOU/pen/MWzQygE)            |
| 66  |    Brian#7046    |        [Codepen](https://codepen.io/PochienTsai/pen/xxQYVVQ)         |
| 67  |    fanglin.y     |        [Codepen](https://codepen.io/flynn841028/pen/oNQELvb)         |
| 68  |   yuyuyu#1330    |          [Codepen](https://codepen.io/yuyu1215/pen/MWzQeYZ)          |
| 69  |     bf_tsai      |          [Codepen](https://codepen.io/BF-Tsai/pen/zYMRBEG)           |
| 70  |     ga771058     | [Codepen](https://codepen.io/ppzigmtg-the-typescripter/pen/NWEyroJ)  |
| 71  |   peggydbc1217   |        [Codepen](https://codepen.io/peggydbc1217/pen/JjepKwE)        |
| 72  |    hance__kao    |          [Codepen](https://codepen.io/HanceKao/pen/LYXQRqg)          |
| 73  |       wind       |           [Codepen](https://codepen.io/wind7y/pen/bGQLBrq)           |
| 74  |    johnchien     |   [Codepen](https://codepen.io/glqwazid-the-selector/pen/KKrQNRQ)    |
| 75  |    阿賀＃3700    |           [Codepen](https://codepen.io/sungho/pen/bGQLgpv)           |
| 76  |      Calvin      |        [Codepen](https://codepen.io/CalvinChang/pen/PoxEMwX)         |
| 77  |     yu.t_liu     |         [Codepen](https://codepen.io/YuT200053/pen/LYXQWYz)          |
| 78  |    homer#1525    |          [Codepen](https://codepen.io/Buckhorn/pen/ExOoLJp)          |
| 79  |    泊岸#3466     |  [Codepen](https://codepen.io/qoq77416416/pen/eYQVGjL?editors=1100)  |
| 80  |      Randy       |   [Codepen](https://codepen.io/landy510/pen/LYXQOGp?editors=1100)    |
| 81  |      Mylène      |        [Codepen](https://codepen.io/hamajibashi/pen/BaGYJva)         |
| 82  |    .rainielin    |        [Codepen](https://codepen.io/Yunchian-Lin/pen/ExOQQoO)        |
| 83  |  stevenchang421  |          [Codepen](https://codepen.io/vwtrpqmm/pen/dyQdmoG)          |
| 84  |      Pinga       |         [Codepen](https://codepen.io/JHuangisme/pen/zYMRWzY)         |
| 85  |   Celine#6773    |        [Codepen](https://codepen.io/celinephoebe/pen/OJaQvKB)        |
| 86  |    patrickpie    |         [Codepen](https://codepen.io/patrickpie/pen/KKrQRMK)         |
| 87  |   Johnson3669    | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/dyQdeLQ)  |
| 88  |     marskuo      |          [Codepen](https://codepen.io/MarsKuo/pen/ExOQLJQ)           |
| 89  | NathanJames#8120 |         [Codepen](https://codepen.io/ufo060204/pen/WNYMybG)          |
| 90  |      .ztion      |           [Codepen](https://codepen.io/ztion/pen/MWzQXoQ)            |
| 91  | 出事了阿伯#9923  |        [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY)         |
| 92  |   shawey.1a2b    |           [Codepen](https://codepen.io/Shawey/pen/oNQEPaM)           |
| 93  |   Aritan#1931    |           [Codepen](https://codepen.io/Aritan/pen/BaGYqBN)           |
| 94  |     hannahTW     |         [Codepen](https://codepen.io/hangineer/pen/KKrZjjK)          |
| 95  |     mm_ieat      |           [Codepen](https://codepen.io/MINN3/pen/poQaQQm)            |
| 96  |    Lesly#1279    |        [Codepen](https://codepen.io/LeslyChang/pen/YzReRpp)          |
| 97  |    棠棠    |        [Codepen](https://codepen.io/bobo52400/pen/bGQLObz)          |
| 98 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/jOQZXpW)|
| 99 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/VwVXYjy?editors=1100)|
| 100 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/LYXdVza)|
| 101 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/WNYzxaa)|
| 102 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/gOQeLdP?editors=1100)|
| 103 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/OJavbYW) |
| 104 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/VwVXPKe?editors=0100) |
| 105| zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/ZEmxKor)|
| 106 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/wvQmmJr)|
| 107 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/LYXdrgv)|
| 108 | KuoMin |[Codepen](https://codepen.io/KuoMin/pen/vYQRroO)|
| 109 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/WNYzgzV)|
| 110 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/vYQRVEv)|
| 111 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/WNYzLyV)|
| 112 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/xxQWMpa)|
| 113 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/gOQeJdp)|
| 114 | ryanchiang_ | [Codepen](https://codepen.io/ryanchiang/pen/MWzGaLx)|
| 115 | ci_ling | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/poQVgLo)|
| 116 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/oNQdyMQ) |
| 117 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/PoxeBbG)|
| 118 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/abQGRPK)|
| 119 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/ZEmoVOd)|
| 120 | sinsaki | [Codepen](https://codepen.io/a8322342/pen/poQVYGO)|
| 121 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/mdQKrLp)|
| 122 | +7 | [Codepen](https://codepen.io/tojibom/pen/abQKpva)|
| 123 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/RwqJKJr)|
| 124 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/rNQKmZz)|
| 125 | Eason#7884 | [Codepen](https://codepen.io/ASLEO/pen/vYQrebP)|
| 126 | heabin.|[Codepen](https://codepen.io/landyhsiao776/pen/xxQzMPX)|
| 127 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/vYQaVEe)|
| 128 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/jOQpXEY)|
| 129 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/KKrxKLX)|
| 130 | EY | [Codepen](https://codepen.io/EY-chen/pen/MWzqvxL)|
| 131 | celia9182 | [Codepen](https://codepen.io/celia01/pen/poQxvRp)|
| 132 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/JjemzWy?editors=1100)|
| 133 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/XWyyzQg)|
| 134 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/RwqqvwW)|
| 135 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/gOQqbRy)|
| 136 | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/QWJoXOr)|
| 137 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/zYMbgjo)|
| 138 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/ZEmZNeL?editors=1100)|
| 139 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/OJaepeE?editors=1100)|
| 140 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/WNLpmbg)|
| 141 | Mia小福#4473 | [Codepen](https://codepen.io/a0950271/pen/zYypLpR?editors=1100)|
| 142 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/eYXYKPL)|

---


- 快速複製格式：

```markdown!
| 0 | user | [Codepen]()|
```

