---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 14

## 垂直水平置中

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


HTML

<div class="box">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="150">
</div>

CSS

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

> 記得加上 CSS Reset

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:----------------- |:------------------------------------------------------------------:|
| 薏慈#3795 | [CodePen](https://codepen.io/its_wang/pen/qBoKpaG) |
| 小鐵#2814 | [CodePen](https://codepen.io/xiron/pen/xxWRORe) |
| Anna Liu#3794 | [CodePen](https://codepen.io/anna618/pen/xxWROGM) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/ExEPPMG) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/MWVjRXa) |
| SASIMI#5099 | [CodePen](https://codepen.io/sashimi1327/pen/VwXKLoL) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/poLNvgB) |
| CloThEs#7837 | [CodePen](https://codepen.io/hexschool/pen/GRxRKrP) |
| Amberhh#2465 | [CodePen](https://codepen.io/Amberhh/pen/PoRbwNe) |
| natsu#2592 | [CodePen](https://codepen.io/natsu19/pen/yLKVyOd) |
| int#7518 | [Codpen](https://codepen.io/intHuang/pen/LYdbEZx) |
| Karol-Kuo#5287 | [Codpen](https://codepen.io/ting-yu-kuo/pen/LYdbENx) |
| Daisy_li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/MWVbYeN) |
| 大衛#4869 | [Codpen](https://codepen.io/exnsrpjc/pen/GRxNgNx) |
| bonnieli1414#4906 | [Codpen](https://codepen.io/bonnieli1414/pen/RwMoNKx) |
| hungya#0773 | [Codpen](https://codepen.io/hungya777/pen/vYRyEgW) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/RwMoNpx) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/MWVbYEY) |
| 洋蔥#5295 | [CodePen](https://codepen.io/HSUNA/pen/bGvBNoz) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/zYWoxPB) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/XWENJYj) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/vYRyEzj) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/KKoNwGK) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/oNqYgmE) |
| mickey#8745 | [codePen](https://codepen.io/weizhetseng/pen/VwXmYgx) |
| StellaHsu#2687 | [codePen](https://codepen.io/stella950114/pen/JjLbddp) |
| Leo Song #8278 | [Codepen](https://codepen.io/sunnylaba/pen/XWENbmg?editors=1100) |
| 連小艾#0791 | [CodePen](https://codepen.io/bolaslien/pen/BarQNjX) |
| zera#6060 | [CodePen](https://codepen.io/zera-tseng/pen/vYRyOLQ) |
| QOO#8446 | [CodePen](https://codepen.io/QOOQOOQ/pen/GRxNJZL) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/BarQNzB?editors=1100) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/MWVbwbp) |
| pidder#7315 | [CodePen](https://codepen.io/pidderliao/pen/wvmoazv) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/KKoNpWg?editors=1100) |
| Fang#4680 | [Codepen](https://codepen.io/std95174/pen/mdxOJWg) |
| Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/QWmGbgE) |
| Sin#0040 | [Codepen](https://codepen.io/sophmfyt-the-sasster/pen/MWVjZJW) |
| peter.chen#0 | [Codepen](https://codepen.io/JIAN-RONG/pen/NWYbqax) |
| JingXuanLin | [CodePen](https://codepen.io/YouShuang/pen/eYMBmMJ) |
| L0F0#8733 | [Codepen](https://codepen.io/l0f0/pen/eYMBNyG) |
| 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/OJvbVZV) |
| 小樽#3151 | [Codepen](https://codepen.io/tzuen-liou/pen/YzapXvb) |
| Scottie#5850 | [Codepen](https://codepen.io/wow767t/pen/bGvBdQw) |
| Van.CS | [Codepen](https://codepen.io/fbacojji-the-selector/pen/oNqYXaV) |
| Arista#5802 | [Codepen](https://codepen.io/arista-hsieh/pen/dymOoEB) |
| Cola#1583 | [Codepen](https://codepen.io/Cola865/pen/KKoNdVZ) |
| 威0#9619 | [Codepen](https://codepen.io/n0918679182/pen/VwXmvaw) |
| Ke#1391 | [Codepen](https://codepen.io/federerke/pen/VwXmLEO) |
| Winnie Wu#5468 | [Codepen](https://codepen.io/Pooh-Wu/pen/RwMoWRr?editors=1100) |
| 痴醉兔 | [Codepen](https://codepen.io/wei-nie/pen/PoRbPpW) |
| kittyko#5951 | [Codepen](https://codepen.io/kittyko/pen/LYdbpWP) |
| 阿蘇#8531 | [Codepen](https://codepen.io/susu8327/pen/wvmoKPr) |
| jin.huang#4666 | [Codepen](https://codepen.io/HJ7878/pen/BarQoxw?editors=1100) |
| Fanglin#4054 | [Codepen](https://codepen.io/flynn841028/pen/eYMBpPo) |
| 小白#2406 | [Codepen](https://codepen.io/gracewhite/pen/XWENmxL) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/vYRyNMx?editors=1100) |
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/ZExBQzd) |
| 群嘉#3943 | [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/rNdWxaB) |
| 鴨鴨#9822 | [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/bGvBEdj) |
| Vian#7338 | [CodePen](https://codepen.io/vianwu31/pen/mdxOVjj?editors=1100) |
| yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/rNdWeNy) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/oNqYxjy) |
| Jamie Wu#9345 | [CodePen](https://codepen.io/Wu220103/pen/vYRyGXv) |
| 阿翰 #1984 | [Codepen](https://codepen.io/JohnHan05/pen/JjLbXrZ) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/dymOXyx) |
| Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/mdxOEVV) |
| Melon#0380 | [Codepen](https://codepen.io/BalaFang/pen/ZExBOOj) |
| suihsilan#9485 | [Codepen](https://codepen.io/suihsilan/pen/oNqYLZN?editors=1100) |
| ajhappy#6488 | [Codepen](https://codepen.io/ajhappy5438/pen/OJvbXYz) |
| 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/BarQQNg) |
| Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/zYWoKRB) |
| choubree#4350 | [Codepen](https://codepen.io/BreeChou/pen/LYdbbrX) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/XWENjGN) |
| Yunei#6323 | [Codepen](https://codepen.io/Yunei/pen/NWYbbJb) |
| Yuna Huang #2692 | [Codepen](https://codepen.io/Yuna1002/pen/dymOOaL) |
| JarDar #6980 | [codepen](https://codepen.io/jardarpen/pen/yLKVgaK) |
| Susie(軒)#6181 | [codepen](https://codepen.io/Codeleaf/pen/qBoqRVW) |
| LINK#1933 | [codepen](https://codepen.io/miyayoe/pen/bGvBgvY) |
| Henry#7386 | [Codepen](https://codepen.io/h1nr9/pen/dymONeY) |
| 鑫鑫#4346 | [Codepen](https://codepen.io/Neil1024/pen/wvmoJLb) |
| 楓之聲#6945 | [CodePen](https://codepen.io/sshane258/pen/PoRbmwL) |
| kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/abYBWoy) |
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/qBoqmKJ) |
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/VwXmbRO) |
| leeli #6423 | [CodePen](https://codepen.io/leelilee/pen/oNqYWrO?editors=1100) |
| Wei-Ting#7691 | [Codepen](https://codepen.io/hellowei-ting/pen/jOzVmgw) |
| Hsiu#8767 | [Codepen](https://codepen.io/amy-hsiu/pen/YzapVgo) |
|阿基基#2557|[codepen](https://codepen.io/JIJI_GNI/pen/dymORNy)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/VwXmzPW)|
|skypassion5000#4151|[codepen](https://codepen.io/skypassion5000/pen/KKoNvOp)|
|咻蹦#1526|[codepen](https://codepen.io/emmasyu/pen/VwXmMaB)|
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/ExENEPO)|
|Clara Cai#7097| [CodePen](https://codepen.io/Clara-Snowy/pen/JjLbLVo)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/qBoqYKm)|
| Iris Huang#6727 | [Codepen](https://codepen.io/ythuang/pen/rNdWvRL) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/VwXmxJX) |
| YaWen#2752 | [Codepen](https://codepen.io/yuwendy/pen/zYWoaGw) |
| Kevin8349#6131 | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/GRxNGpP) |
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/XWENYZz)|
|jeter#8014|[CodePen](https://codepen.io/gi-tai-she/pen/RwMoeGq)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/XWENyxG?editors=1100)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/LYdbMmy) |
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/jOzVdLW?editors=1100)|
yo_yo#2678|[CodePen](https://codepen.io/djmliogn-the-flexboxer/pen/dymOaJg)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/yLKVwqq)|
|Ralf Hsiao#1921|[codepen](https://codepen.io/RalfHsiao/pen/VwXmNvm)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/mdxOZPy)|
|Carrie#2750|[Codepen](https://codepen.io/carrie-wang/pen/zYWNGWE)|
|鉦勝 #8333|[Codepen](https://codepen.io/atckmax823/pen/vYRgGGa)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/LYdxbQm)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/KKoavXJ)|
| GARBO#6659 | [CodePen](https://codepen.io/garbo8130/pen/ZExLJgG)|
| sophiee#7015 | [CodePen](https://codepen.io/sophiee2727/pen/qBoRVrg)
| 瑞瑞#4605 | [CodePen](https://codepen.io/tsai-li-ting/pen/QWmdaBY)
| Tuhacrt#0008 | [CodePen](https://codepen.io/Tuhacrt/pen/OJvWvZb)
|bakiii|[codepen](https://codepen.io/aki168/pen/wvmgZMP)
| RayChen#6088 | [CodePen](https://codepen.io/raychen1996/pen/jOzBNBN)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/gOemOqM)|
|Pony0303#6778|[Codepen](https://codepen.io/Pony0303/pen/qBorPam)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/zYWZVpW?editors=1100)|
|jeter#8014|[Codepen](https://codepen.io/gi-tai-she/pen/rNdyEgK?editors=1100)|
|EmilyLin#0526|[Codepen](https://codepen.io/c199615/pen/BarRyjp?editors=1100)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/ExEmKeZ)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/oNqWMZy)|
|逸川#6319|[CodePen](https://codepen.io/bryanlin8911/pen/qBomvyy)
|Nini Chen#5790|[CodePen](https://codepen.io/ninistyle/pen/jOzwEOB?editors=1100)
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/NWYgdGZ)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/KKoqLzB)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/VwXWOrm)|
| 肉魚#2149 |[Codepen](https://codepen.io/zoechen13/pen/rNdwExe)|
|Deborah#0033 |[Codepen](https://codepen.io/deborah-tsai/pen/jOzLGmK)|
|Cream#3449 |[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/eYMEeLB)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/NWYaWqO)|
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/eYMemqy)|
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/jOzaGWB)
|Manson許 #2295|[CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/KKoyBbL)|
|mei#8421|[CodePen](https://codepen.io/Shila-Chen/pen/YzaYzPw)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/JjLMjyd)|
|rueee#7997|[CodePen](https://codepen.io/Jull-C/pen/zYWRZwr)|
|Jumpye#8601|[CodePen](https://codepen.io/Jumpye/pen/jOzZdLq?editors=1100)|
|CJ07#0176|[CodePen](https://codepen.io/cjtseng07/pen/eYMMPrv)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/abYKJyr)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/QWmZZdq)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/oNqQWVX)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/YzagBmg)