CSS對於網頁設計的人來說是不可或缺的工具，要達到妥善運用CSS的境界，基本功必然是要扎實才行。
一直以來都是套用已有的CSS框架像是Bootstrap, Bulma, UIKit...等等, 對於一些基本的CSS用法是一知半解的狀態。 為了鍛鍊自己的基本功，除了翻查語法手冊外，多模仿＆參考各家網站的設計應該是一件相當有益的方式。 因此，這次先從普遍常有的頁面開始著手練習，重新認識文字，圖片的位置設定方式。
製作完成的頁面如下。 如同一般常見的頁面，整體的頁面分成header, main, footer三個部分。
簡單介紹div要素，文字要素，圖片要素的置中方法與注意點。
width: 60%;
margin: 0 auto;
使用此法時，需要設定div要素的width才有效。
水平置中
方法1: 將文字要素的部分用一個div包起來，在用上面介紹的div要素的橫軸方向置中的方式。
方法2: 文字要素如<h1>, <p>等，使用text-align來做設定。
text-align: center;
全置中
.flex-center {
display: flex;
justify-content: center; //水平置中
align-items: center; //垂直置中
height: 400px;
border: 3px solid green;
}
文字的垂直置中的方法好像沒有想像中的簡單，以上的做法需要將要置中的文字要素放到一個<div>中，然後對<div>來做CSS設定。
<div class="flex-center">
<div>
<p>This is a flex-center example</p>
<ul>
<li>Javascript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
</div>
img {
margin: 0 auto;
display: block;
}
可以使用margin來實現，但使用此法時，圖片的display屬性必須設定為 block 。
文字要素的全置中 方式似乎可以應用的場合較多，因此這個方法相對來說比較實用一些。
但每個方法有其限制，似乎沒有一個十全十美的方法，所以網路上也有很多其他的設定方式。我想在不同的設計要求下，使用符合要求的方式來設定才是最為重要的。因此多學一項的設定方式，也就多一種設定選項以備使用才是最為萬全的作法。