css幾種垂直居中方法和原理淺析（1），我相信你一定

css幾種垂直居中方法和原理淺析（1），我相信你一定會(huì)用到的

相信前端童鞋在日常的布局中一定遇到過各種各樣的布局情形，而各種居中的方法一定不占少數(shù)。這里我給大家分享幾種居中的方式，并且簡(jiǎn)單的解析一下他們的原理。

絕對(duì)定位居中

居中效果展示

簡(jiǎn)易代碼如下：

<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>

解析：這個(gè)主要是用position: absolute;來實(shí)現(xiàn)垂直居中.

我們都知道m(xù)argin：auto;是可以實(shí)現(xiàn)水平居中的。

只添加margin：auto；實(shí)現(xiàn)水平居中

瀏覽器計(jì)算的div[class="box"]盒子模型

瀏覽器計(jì)算的body的盒子模型

那當(dāng)我們添加絕對(duì)定位的時(shí)候，box這個(gè)div就會(huì)脫離文檔流，變成塊狀元素（你可能會(huì)問box本來就是塊狀元素的div啊，是的，但是如果這里是span當(dāng)然包含所有內(nèi)斂元素都會(huì)變成塊狀元素。可以看下《說說行內(nèi)元素與塊級(jí)元素以及之間的轉(zhuǎn)換？》）。

添加絕對(duì)定位后的表現(xiàn)

瀏覽器計(jì)算的div[class="box"]盒子模型

瀏覽器計(jì)算的body的盒子模型

可以明顯的看出box脫離了原本的正常文檔流，body高度為0。

再次添加top: 0; left: 0; bottom: 0; right: 0; ps：這里去除了box的寬度限定

添加 top: 0; left: 0; bottom: 0; right: 0;的表現(xiàn)

瀏覽器計(jì)算的div[class="box"]盒子模型

瀏覽器會(huì)為box元素包裹一層新的盒子，因此這個(gè)元素會(huì)填滿它相對(duì)父元素的內(nèi)部空間，這個(gè)相對(duì)父元素可以是body標(biāo)簽，或者是一個(gè)非靜態(tài)（默認(rèn)）定位的容器。

添加寬高后

給元素設(shè)置了寬高以后，瀏覽器會(huì)阻止元素填滿所有的空間，根據(jù)margin: auto; 的要求，重新計(jì)算，并包裹一層新的盒子。既然塊元素是絕對(duì)定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會(huì)給margin-top和margin-bottom設(shè)置一個(gè)相等的值。

于是就產(chǎn)生了絕對(duì)居中的效果。

那如果想要在父容器里面垂直居中呢。只需要給父容器添加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>

居中的效果

絕對(duì)居中的好處：

布局塊可以自由調(diào)節(jié)大小
無需額外的dom節(jié)點(diǎn)
自適應(yīng)布局，可以使用百分比和最大最小高寬等樣式
居中時(shí)不考慮元素的padding值（也不需要使用box-sizing樣式）
img的圖像也可以使用
跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）
同時(shí)注意：
必須聲明元素高度
推薦設(shè)置overflow:auto;樣式避免元素溢出，顯示不正常的問題
這種方法在Windows Phone上不起作用

今天這篇居中文章就寫到這了，之后還會(huì)介紹其他幾種居中方法，請(qǐng)繼續(xù)關(guān)注哦！

本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。

一、我們先創(chuàng)建一張空白的網(wǎng)頁(yè)，網(wǎng)頁(yè)要自適應(yīng)手機(jī)。

圖1

二、我們?cè)賱?chuàng)建網(wǎng)頁(yè)的頭部。

圖2

圖3

三、做出來的網(wǎng)頁(yè)頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。

圖4

圖5

四、給網(wǎng)頁(yè)頭部添加一些內(nèi)容。

圖6

圖7

五、接下來開始做導(dǎo)航條了。

圖8

圖9

六、發(fā)現(xiàn)沒，導(dǎo)航條居然看不見，沒有東西在里面自然是看不見的，我們加三個(gè)鏈接吧。

圖10

圖11

七、這回是看見了，不過樣式太丑，我們改改樣式。

圖12

圖13

八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點(diǎn)動(dòng)態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時(shí)，鏈接塊變色。

圖14

圖15

九、開始做網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。

圖16

圖17

十、我想讓它橫著排，它卻是豎著排，改改各個(gè)塊的樣式。

圖18

圖19

十一、給主體的各個(gè)塊加點(diǎn)內(nèi)容。

圖20

圖21

十二、內(nèi)容是有了，但你會(huì)發(fā)現(xiàn)各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個(gè)內(nèi)部距離。

圖22

圖23

十三、距離是有了，但有一個(gè)側(cè)欄跑到了另一行，怎么回事？原來padding是會(huì)改變盒子的整體寬度，我們?cè)臼?00%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。

圖24

圖25

十四、這回終于在一行了，接下來可以做網(wǎng)頁(yè)底部了。

圖26

圖27

十五、改改樣式，讓底部好看一點(diǎn)。

圖28

圖29

十六，這個(gè)時(shí)候，網(wǎng)頁(yè)的整體版面就完成了，再補(bǔ)充一個(gè)小內(nèi)容，讓網(wǎng)頁(yè)瀏覽器在小于600像素寬的時(shí)候，主體內(nèi)容的三個(gè)塊由橫變豎。

圖30

圖31

【CSS Grid入門】看這一篇就夠了：從零開始掌握網(wǎng)格布局藝術(shù)

### 引言

CSS Grid布局是近年來CSS領(lǐng)域的一項(xiàng)重大革新，它為Web開發(fā)者提供了一種強(qiáng)大、靈活且直觀的方式來創(chuàng)建二維網(wǎng)格布局，徹底改變了我們構(gòu)建網(wǎng)頁(yè)布局的方式。本文將帶你從零開始學(xué)習(xí)CSS Grid，通過一系列詳細(xì)的示例和代碼，讓你一次性掌握這項(xiàng)革命性的布局技術(shù)。

### 一、CSS Grid基礎(chǔ)概念

**1.1 容器與網(wǎng)格項(xiàng)**

- **grid container**：通過將display屬性設(shè)置為grid或inline-grid，將一個(gè)元素變?yōu)榫W(wǎng)格容器。

```html

</div>

<style>

.grid-container {

display: grid;

/* 其他Grid屬性 */

}

</style>

```

**1.2 網(wǎng)格線與網(wǎng)格單元格**

- **grid lines**：網(wǎng)格線是網(wǎng)格布局中的分界線，分為行(grid-row)和列(grid-column)。

- **grid cells**：相鄰的行和列網(wǎng)格線之間的區(qū)域稱為網(wǎng)格單元格。

### 二、CSS Grid布局屬性詳解

**2.1 網(wǎng)格模板定義**

- `grid-template-columns` 和 `grid-template-rows`：定義每一行和每一列的大小。

```css

.grid-container {

grid-template-columns: repeat(3, 1fr); /* 3等份 */

grid-template-rows: auto 1fr; /* 第一行自適應(yīng)，第二行填滿剩余空間 */

}

```

**2.2 網(wǎng)格區(qū)域命名與定位**

- `grid-template-areas`：為每個(gè)網(wǎng)格項(xiàng)指定區(qū)域名稱并布局。

```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 網(wǎng)格項(xiàng)目的定位**

- `grid-column` 和 `grid-row`：直接指定網(wǎng)格項(xiàng)目的起始和結(jié)束網(wǎng)格線。

```css

.item-a {

grid-column: 1 / 3; /* 從第一列到第三列 */

grid-row: 2 / 4; /* 從第二行到第四行 */

}

```

### 三、CSS Grid進(jìn)階特性

**3.1 自動(dòng)布局：fr單位與auto-fill/auto-fit**

```css

.grid-container {

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根據(jù)窗口大小自動(dòng)填充列 */

}

```

**3.2 對(duì)齊與間距**

- `justify-items`、`align-items`、`justify-content`、`align-content`：控制網(wǎng)格項(xiàng)目和行/列的對(duì)齊方式。

```css

.grid-container {

justify-items: center; /* 橫向居中 */

align-items: start; /* 縱向頂部對(duì)齊 */

justify-content: space-between; /* 行間間距均勻分布 */

}

```

**3.3 動(dòng)態(tài)網(wǎng)格：響應(yīng)式布局**

根據(jù)不同的斷點(diǎn)調(diào)整網(wǎng)格布局，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

```css

@media (max-width: 768px) {

.grid-container {

grid-template-columns: 1fr; /* 在小屏幕下變?yōu)閱瘟胁季?*/

}

```

### 四、實(shí)戰(zhàn)案例：使用CSS Grid構(gòu)建常見布局

**4.1 兩欄布局**

```html

</div>

<style>

.grid-container {

display: grid;

grid-template-columns: 200px 1fr;

}

</style>

```

**4.2 復(fù)雜網(wǎng)格布局（例如，雜志布局）**

此處提供一個(gè)復(fù)雜的網(wǎng)格布局示例，通過CSS Grid實(shí)現(xiàn)類似雜志布局的復(fù)雜排版。

```html

```

### 結(jié)語(yǔ)

通過這篇全面的CSS Grid入門教程，你已掌握了網(wǎng)格布局的基本要素與實(shí)用技巧。然而，CSS Grid的奧妙遠(yuǎn)不止于此，它的強(qiáng)大之處在于其無比靈活和自由的布局能力。繼續(xù)深入研究和實(shí)踐，你將在項(xiàng)目中發(fā)現(xiàn)更多的可能性，使你的Web設(shè)計(jì)變得更加優(yōu)雅、高效。祝你在CSS Grid的道路上越走越遠(yuǎn)，享受到它帶來的便利與樂趣！

在線咨詢

上一篇：一款輕量語(yǔ)法高亮插件-Prism.js
下一篇：eclipse創(chuàng)建springboot項(xiàng)目的三種方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

css幾種垂直居中方法和原理淺析（1），我相信你一定

您的項(xiàng)目需求