整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
相信前端童鞋在日常的布局中一定遇到過各種各樣的布局情形，而各種居中的方法一定不占少數。這里我給大家分享幾種居中的方式，并且簡單的解析一下他們的原理。
絕對定位居中
居中效果展示
簡易代碼如下：
<style type="text/css" media="screen">
.box{
background:#ccc;
height:100px;
width:200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<div class="box">
</div>
解析：這個主要是用position: absolute;來實現垂直居中.
我們都知道margin：auto;是可以實現水平居中的。
只添加margin：auto；實現水平居中
瀏覽器計算的div[class="box"]盒子模型
瀏覽器計算的body的盒子模型
那當我們添加絕對定位的時候，box這個div就會脫離文檔流，變成塊狀元素（你可能會問box本來就是塊狀元素的div啊，是的，但是如果這里是span當然包含所有內斂元素都會變成塊狀元素。可以看下《說說行內元素與塊級元素以及之間的轉換？》）。
添加絕對定位后的表現
瀏覽器計算的div[class="box"]盒子模型
瀏覽器計算的body的盒子模型
可以明顯的看出box脫離了原本的正常文檔流，body高度為0。
再次添加top: 0; left: 0; bottom: 0; right: 0; ps：這里去除了box的寬度限定
添加 top: 0; left: 0; bottom: 0; right: 0;的表現
瀏覽器計算的div[class="box"]盒子模型
瀏覽器會為box元素包裹一層新的盒子，因此這個元素會填滿它相對父元素的內部空間，這個相對父元素可以是body標簽，或者是一個非靜態（默認）定位的容器。
添加寬高后
給元素設置了寬高以后，瀏覽器會阻止元素填滿所有的空間，根據margin: auto; 的要求，重新計算，并包裹一層新的盒子。既然塊元素是絕對定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會給margin-top和margin-bottom設置一個相等的值。
于是就產生了絕對居中的效果。
那如果想要在父容器里面垂直居中呢。只需要給父容器添加position: relative;或者position: fixed;都是可以的。
.part{
width:400px;
height:400px;
background:red;
position:relative;
}
.box1{
background:#ccc;
height:100px;
width:200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="part">
<div class="box1">
</div>
</div>
居中的效果
絕對居中的好處：
布局塊可以自由調節大小
無需額外的dom節點
自適應布局，可以使用百分比和最大最小高寬等樣式
居中時不考慮元素的padding值（也不需要使用box-sizing樣式）
img的圖像也可以使用
跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）
同時注意：
必須聲明元素高度
推薦設置overflow:auto;樣式避免元素溢出，顯示不正常的問題
這種方法在Windows Phone上不起作用
今天這篇居中文章就寫到這了，之后還會介紹其他幾種居中方法，請繼續關注哦！
0
本例參考了網上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網上僅是源碼。
一、我們先創建一張空白的網頁，網頁要自適應手機。
圖1
二、我們再創建網頁的頭部。
圖2
圖3
三、做出來的網頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內部距離。
圖4
圖5
四、給網頁頭部添加一些內容。
圖6
圖7
五、接下來開始做導航條了。
圖8
圖9
六、發現沒，導航條居然看不見，沒有東西在里面自然是看不見的，我們加三個鏈接吧。
圖10
圖11
七、這回是看見了，不過樣式太丑，我們改改樣式。
圖12
圖13
八、加上內部距離，就好看了許多，即然是鏈接，我們加點動態吧，當鼠標在鏈接上面時，鏈接塊變色。
圖14
圖15
九、開始做網頁內容，網頁內容我分為三塊，左右兩邊是側欄，中間是主要內容。
圖16
圖17
十、我想讓它橫著排，它卻是豎著排，改改各個塊的樣式。
圖18
圖19
十一、給主體的各個塊加點內容。
圖20
圖21
十二、內容是有了，但你會發現各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個內部距離。
圖22
圖23
十三、距離是有了，但有一個側欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現在多了padding的寬度，自然就換行了，解決一下吧。
圖24
圖25
十四、這回終于在一行了，接下來可以做網頁底部了。
圖26
圖27
十五、改改樣式，讓底部好看一點。
圖28
圖29
十六，這個時候，網頁的整體版面就完成了，再補充一個小內容，讓網頁瀏覽器在小于600像素寬的時候，主體內容的三個塊由橫變豎。
圖30
圖31
【CSS Grid入門】看這一篇就夠了：從零開始掌握網格布局藝術
### 引言
CSS Grid布局是近年來CSS領域的一項重大革新，它為Web開發者提供了一種強大、靈活且直觀的方式來創建二維網格布局，徹底改變了我們構建網頁布局的方式。本文將帶你從零開始學習CSS Grid，通過一系列詳細的示例和代碼，讓你一次性掌握這項革命性的布局技術。
### 一、CSS Grid基礎概念
**1.1 容器與網格項**
- **grid container**：通過將display屬性設置為grid或inline-grid，將一個元素變為網格容器。
```html
<div class="grid-container">
<!-- 網格項 -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<!-- 更多網格項... -->
</div>
<style>
.grid-container {
display: grid;
/* 其他Grid屬性 */
}
</style>
```
**1.2 網格線與網格單元格**
- **grid lines**：網格線是網格布局中的分界線，分為行(grid-row)和列(grid-column)。
- **grid cells**：相鄰的行和列網格線之間的區域稱為網格單元格。
### 二、CSS Grid布局屬性詳解
**2.1 網格模板定義**
- `grid-template-columns` 和 `grid-template-rows`：定義每一行和每一列的大小。
```css
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 3等份 */
grid-template-rows: auto 1fr; /* 第一行自適應，第二行填滿剩余空間 */
}
```
**2.2 網格區域命名與定位**
- `grid-template-areas`：為每個網格項指定區域名稱并布局。
```css
.grid-container {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
```
**2.3 網格項目的定位**
- `grid-column` 和 `grid-row`：直接指定網格項目的起始和結束網格線。
```css
.item-a {
grid-column: 1 / 3; /* 從第一列到第三列 */
grid-row: 2 / 4; /* 從第二行到第四行 */
}
```
### 三、CSS Grid進階特性
**3.1 自動布局：fr單位與auto-fill/auto-fit**
```css
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根據窗口大小自動填充列 */
}
```
**3.2 對齊與間距**
- `justify-items`、`align-items`、`justify-content`、`align-content`：控制網格項目和行/列的對齊方式。
```css
.grid-container {
justify-items: center; /* 橫向居中 */
align-items: start; /* 縱向頂部對齊 */
justify-content: space-between; /* 行間間距均勻分布 */
}
```
**3.3 動態網格：響應式布局**
根據不同的斷點調整網格布局，實現響應式設計。
```css
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 在小屏幕下變為單列布局 */
}
}
```
### 四、實戰案例：使用CSS Grid構建常見布局
**4.1 兩欄布局**
```html
<div class="grid-container">
<div class="sidebar">側邊欄</div>
<div class="main">主要內容區</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
</style>
```
**4.2 復雜網格布局（例如，雜志布局）**
此處提供一個復雜的網格布局示例，通過CSS Grid實現類似雜志布局的復雜排版。
```html
<!-- 省略布局HTML代碼 -->
```
### 結語
通過這篇全面的CSS Grid入門教程，你已掌握了網格布局的基本要素與實用技巧。然而，CSS Grid的奧妙遠不止于此，它的強大之處在于其無比靈活和自由的布局能力。繼續深入研究和實踐，你將在項目中發現更多的可能性，使你的Web設計變得更加優雅、高效。祝你在CSS Grid的道路上越走越遠，享受到它帶來的便利與樂趣！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
