第1期 聊聊css居中那點事

前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。

水平居中又分為：

文字水平居中

實現文字的水平居中，是最為簡單的了，加上text-align: center;即可，看以下**：

文字水平居中

.text-center

注意：父元素必須是塊級元素，即display: block;至於什麼是塊級元素，不在本文討論的範圍

水平居中跟文字一樣，也是使用text-align: center;

非文字元素，已知寬度的水平居中

方法一：margin: 0 auto;

比如div元素，假設我們已經知道它的寬度是300px,這時候我們就可以這樣設定,加上margin: 0 auto;這句**。

我是水平居中的div

.div1

方法二：絕對定位+負邊距

.parent3 

.child3 

方法一：使用text-align: center + inline-block

我覺得比較簡單的方法就是給父元素設定text-align: center;給子元素新增display: inline-block;這樣就行了，還是來看**比較直接。

未知元素寬度

.parent 

.child 

父元素設定相對定位position: relative;;子元素設定絕對定位position: absolute加transform。看以下例子：

我是水平居中的div

.parent 

.child 

注意：為了更好的相容性，transform需要加上不同瀏覽器的字首。

還是來看具體的**：

我是水平居中的div

.parent2 

.child2 

我是水平居中的div

.parent4 

.child4 

方法五：fit-content屬性

「fit-content」是css中給「width」屬性新加的乙個屬性值，他配合margin可以讓我輕鬆的實現水平居中的效果。這個方法也是我第一次用到，後期有時間再來仔細研究學習下。

來看**：

我是水平居中的div

.fitcontentdiv

注意：同樣是存在瀏覽器的相容性問題。

方法一：height=line-height

這個比較簡單，只需要設定高度height和行高line-height相等即可。看**：

我是垂直居中的文字

.txt1

注意：這個方法有個不好的地方就是只能是針對單行的文字，多行就不適合用。

我們設定padding-top和padding-bottom相等就可以了，而且此方法針對多行文字也沒問題。看**：

我是垂直居中的文字

.txt2

注意：這種方法也是有乙個明顯的缺陷，就是你不能給文字的父元素設定高度。

此方法是利用**單元格的特性，我們直接看**：

我是垂直居中的文字（這裡面也可以放）

.parent6 

.child6 

的垂直居中

使用vertical-align: middle，直接看**：

已知元素高度的垂直居中

方法一：絕對定位+負邊距

看**：

我是垂直居中的div

.parent6 

.child6 

方法一：絕對定位+transform

直接上**了：

我是垂直居中的div

.parent7 

.child7 

注意：同樣需要考慮transform的相容性問題。

我是垂直居中的div

.parent8 

.child8 

注意：此方法要考慮flex的相容性問題。

我是垂直居中的div

.parent9 

.child9 

注意：此方法要考慮flex的相容性問題。

css居中那點事兒

在css中對元素進行水平居中是非常簡單的，然而使元素垂直居中就不是一件簡單的事情了，多年以來，垂直居中已經成為了css領域的聖杯，因為它是極其常見的需求，但是在實踐中卻不是一件簡單的事情。下面我會簡單介紹水平居中，並著重討論垂直居中。en pic.png 注意 對於某個塊元素的居中，不能在其父元素的...

有關css居中 那點事

前言 怎麼說呢？我以前只知道margin 0 auto 從來沒想過會這麼高深，自從學習了慕課網，我才明白了原來css居中是有很多學問的。首先來說一下分類。分類指的是對什麼樣的元素來進行居中，不同的元素對應不同的方法。1.行內元素 2.定寬的 塊狀元素 定寬的，也就是加了width 100px 這種。...

css中關於居中的那點事兒

關於居中，無論是水平居中，還是垂直居中都有很多方式，下面我來介紹一些常用的。this is a div 注意 如果塊級元素是body的直接子元素，不設定寬，則預設100 看不出效果 不設定高，且div中沒有內容，則高度預設為0。因此，一定要同時設定塊級元素的寬和高，這樣才能看出來效果。對於在乙個di...