前端開發常見佈局

老毛發表於2021-10-21
前端
前端開發在頁面搭建初期，往往需要我們具備框架性的思維，根據設計圖來劃分頁皮膚塊結構，以及在不同尺寸裝置間的差異處理。掌握一些常見的佈局，可以使我們事半功倍，本文就來聊一聊居中佈局。

文字居中對齊

標題所說的居中對齊是指一個div內的文字在其水平和垂直方向都處於中心的位置。假設有下面DOM結構：

<div class="wrap">
 <span>對齊方式：水平垂直居中</span> 
</div>

樣式程式碼如下：

.wrap {
    height: 100px;
    border: 2px solid blueviolet;
}

在瀏覽器中渲染出來大概是下面的樣子：
1
我們通過css樣式來分步驟達到居中對齊的效果

文字水平居中

這個是很基礎的前端知識，只需要給樣式中加上text-align: center

.wrap {
    height: 100px;
    border: 2px solid blueviolet;
    text-align: center;
}

瀏覽器結果：
1

文字垂直居中

現在需求又要變更，需要文字在容器中垂直方向也要居中，怎麼辦？使用margin或者padding？還是使用定位？恐怕都不夠優秀。其實只要在加一行樣式即可 line-height: 100px

.wrap {
    height: 100px;
    border: 2px solid blueviolet;
    text-align: center;
    line-height: 100px;
}

瀏覽器結果：
1
可見只要設定一個容器的line-height和height一樣大時，它內部的文字就可以垂直居中，這個屬性也適用於a標籤等其他標籤，在寫按鈕的樣式需要按鈕文字居中時很有用。

塊元素居中對齊

考慮有下面的DOM結構

<div class="parent02">
    <div class="child01">塊元素：垂直居中對齊</div>
</div>

樣式程式碼如下，瀏覽器效果如圖

.parent02 {
    height: 100px;
    border: 2px solid rgba(13,202,240,.8);
}
.child01 {
    background-color: rgb(48, 245, 245);
    width: 80%;
    height: 50%;
}

block

水平居中對齊

只要給.child01 中新增一行 margin: 0 auto即可水平居中

.child01 {
    background-color: rgb(48, 245, 245);
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

block

垂直居中對齊

細心的小夥伴可能注意到上邊.child01的高度設定為父級的50%，我們可以設定它的margin-top或者parent02的padding-top來達到垂直居中的目的，但是如果.parent02和.child01的高度都不確定呢？恐怕就需要不停的修改樣式了。這時flex佈局就可以幫了，只需要在父級中設定即可，加入下邊兩行，無論.parent02和.child01的高度怎麼變化都可以保持居中

.parent02 {
    height: 100px;
    border: 2px solid rgba(13,202,240,.8);
    display: flex;
    align-items: center;
}

block

大功告成！到這裡本文要說的居中佈局就要告一段落了，我們來回顧一下主要關鍵點

  • 文字居中使用 text-align 和 line-height
  • 塊元素居中使用 margin：0 auto 和 flex

希望本文對你能有幫助^_^

原文連線?

相關文章