用css讓元素水平垂直居中幾種方法

針對小白和小白面試人群首先說一些題外話，那就說一下博主大四上半年去一家公司面試的尷尬事吧。哈哈~~我記得那是我第一次列印簡歷正式面試的第一家，那個哥可以說很面善，人狠話不多，面對著自信滿滿（渣到爆）的我，第乙個問題問我行元素塊元素的區別，我一想，這個我會啊，可是以我當時的想法我只能舉例子啊，那就說p是行元素吧，div是塊元素吧，哈哈哈，面試大哥都笑了，哈哈哈，現在想起來我也想笑，那麼現在就先說一下行元素和塊元素吧！

行元素：內容決定所佔空間的多少，內容多少就佔多少空間。不能設定寬高（預設寬高是0）。margin垂直方向無效。

常見的行元素：span, a, b, i, u, font, sub, sup

塊元素：不管內容多少，塊元素都會在瀏覽器中獨佔一行，可以設定寬高，如果不設定寬高那麼寬就是100%（佔滿父級元素的一整行）

常見的塊元素： div, h1-h6, p, ul, li, ol, dl, dt, hr, form, table,tr, td

行級塊元素：共享一行，可以設定寬高，可以設定margin, padding。

常見的行級塊元素： img, input

那麼現在我們就來戳重點啦~

我們知道行級元素不能設定寬高，那怎樣讓單行元素居中，如下**：

height:
30px;
line-height:
30px;
text-align:center;

那麼怎樣讓多行元素居中，如下**：

display: table-cell;
width:
200px;
height:
150px;
border:
1px solid blue;
vertical-align: middle;

我們知道塊級元素可以設定寬高，自然就可以有很多種方法讓塊元素垂直居中：

絕對定位，（不知道塊元素的寬高是多少時）；

div

絕對定位，（已知塊元素的寬高是多少時1）；

div

絕對定位，（已知塊元素的寬高是多少時2）；

div

flex布局，（給當前元素的父級新增）；

//html
="father"
>
="son"
>
<
/div>
<
/div>
/**css**/
.father
.son

table-cell實現水平垂直居中

//html
="table-cell"
>
我愛你<
/p>
<
/div>
/**css**/
.table-cell

絕對定位(calc() 函式動態計算實現水平垂直居中)

/**css**/ .parent .child

.child.size

grid(網格布局)

/**css**/ .parent

.child

目前知道的就是這些方法啦，水平垂直劇中是頁面最常用到的，例如：彈出框，按鈕等等，我這裡只是寫出了幾種，還有很多水平垂直的方法，希望大家來幫忙補充哈~

第一次寫部落格，緊張之下如有錯誤希望得到更改通知。

那請多指教！

用css讓元素水平垂直居中幾種方法

css讓元素水平垂直居中

CSS實現元素水平居中垂直居中水平垂直居中

幾種可以讓元素水平垂直居中的方法

用css讓元素水平垂直居中幾種方法

css讓元素水平垂直居中

CSS實現元素水平居中 垂直居中 水平垂直居中

幾種可以讓元素水平垂直居中的方法

相關推薦

CSS實現元素水平居中垂直居中水平垂直居中