「例」用div+css做一個(gè)簡(jiǎn)單的登錄界面「204」

例最終效果如下：

一、設(shè)置整個(gè)網(wǎng)頁(yè)的背景色

圖1

圖2

二、創(chuàng)建一個(gè)盒子，讓其水平居中，距離上邊200像素。

圖3

圖4

三、把盒子設(shè)置四個(gè)角為圓角，圓10個(gè)像素。

圖5

圖6

四、在大盒子里做一個(gè)ding盒子，設(shè)置它上面兩個(gè)角是圓角，下面兩個(gè)角是直角。

圖7

圖8

五、ding盒子里輸入幾個(gè)字，讓這幾個(gè)字在盒子里水平居中，垂直居中，關(guān)于盒子內(nèi)居中問(wèn)題可參看我寫(xiě)的文【203】。

圖9

圖10

六、在deng盒子里面再做三個(gè)小盒子，取名為ref，注意如果這三個(gè)盒子不用浮動(dòng)，會(huì)有什么效果，這個(gè)你可以試試看。

圖11

圖12

七、往ref盒子里面添加信息，發(fā)下圖，這里順便學(xué)習(xí)兩個(gè)標(biāo)簽，一個(gè)是input，一個(gè)是button。

圖13

圖14

八、去掉背景色，然后用盒子內(nèi)居中的方法，讓這些元素居中。

圖15

圖16

九、通過(guò)樣式，設(shè)置按鈕的大小和字的大小，這里我特地用id來(lái)給元素上名字，不同于class，在樣式里調(diào)用的時(shí)候，一個(gè)是前面加.一個(gè)是前面加#。

圖17

圖18

十、最后設(shè)置一下密碼輸入框，輸入內(nèi)容時(shí)為密碼隱藏符號(hào)。

圖19

圖20

文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。略有刪改

在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當(dāng)然這些技術(shù)可用于任何類型的元素。

初始化

我們首先創(chuàng)建一個(gè)容器，其中包含一個(gè)簡(jiǎn)單的div元素，我們將使用它來(lái)演示這些居中方法。下面是HTML：

<article>
  <div></div>
</article>

下面是我們的初始CSS：

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

在下面所有的例子中，我們將使用display: grid屬性。這將<article>元素建立為網(wǎng)格容器，并為該容器生成塊級(jí)網(wǎng)格。我們已經(jīng)將網(wǎng)格容器設(shè)置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動(dòng)。

接下來(lái)讓我們來(lái)看看將div居中的各種方法。

1.使用 CSS Grid 和 place-self 將Div居中

place-self屬性提供了一種簡(jiǎn)單的方法來(lái)水平和垂直居中網(wǎng)格項(xiàng)。它用于將網(wǎng)格項(xiàng)置于其網(wǎng)格單元格的中心。

將div居中就像這樣簡(jiǎn)單：

article {
  display: grid;
}

div {
  place-self: center;
}

place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡(jiǎn)寫(xiě)。

使用place-self對(duì)于在網(wǎng)格內(nèi)居中單個(gè)項(xiàng)目特別有用，因?yàn)樗蛊渌W(wǎng)格項(xiàng)目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法，繼續(xù)看看其他的一些方法。

2.使用 CSS Grid 和 place-items 居中Div

place-items屬性是justify-items（水平）和align-items（垂直）的簡(jiǎn)寫(xiě)。這些屬性應(yīng)用于網(wǎng)格容器而不是每個(gè)網(wǎng)格項(xiàng)，當(dāng)我們希望所有網(wǎng)格項(xiàng)具有相同的位置時(shí)，這些屬性非常有用。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-items: center;
}

我們可以基于初始代碼添加更多的div元素，看看會(huì)發(fā)生什么。結(jié)果是每個(gè)div將在其網(wǎng)格單元格內(nèi)水平和垂直居中，如下圖所示（通過(guò)瀏覽器的網(wǎng)格檢查器）。

3.使用 place-content 居中Div

place-content屬性是justify-content（水平）和align-content（垂直）的簡(jiǎn)寫(xiě)。雖然place-self和place-items控制網(wǎng)格項(xiàng)如何放置在其指定的網(wǎng)格單元格中，但place-content指定網(wǎng)格容器的整個(gè)內(nèi)容應(yīng)如何對(duì)齊（即，所有網(wǎng)格項(xiàng)被視為一個(gè)組）。在我們的演示中，只有一個(gè)網(wǎng)格項(xiàng)（我們的單個(gè)黃色div），因此我們也可以使用place-content將其置于其容器的中心。

將以下CSS代碼添加到父容器：

article {
  display: grid;
  place-content: center;
}

這里有幾點(diǎn)需要注意。到目前為止，在所有的例子中我們都使用了center的值。但是到目前為止，我們已經(jīng)探索的每個(gè)屬性都有各種其他的放置物品的值。place-content有很多值，另外兩個(gè)值也可以用于居中我們的div：space-around和space-evenly。

此外，在我們的簡(jiǎn)單例子中，一個(gè)div在容器中居中，我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來(lái)居中div，有興趣的可以嘗試看看。

4.使用 CSS Grid 和 Auto Margins 居中

像往常一樣，我們將使用display: grid來(lái)定位父容器。我們還將使用margin: auto為div指定自動(dòng)邊距。這使瀏覽器自動(dòng)計(jì)算div周圍的可用空間，并在其網(wǎng)格單元格內(nèi)垂直和水平劃分，將div放置在中間：

article {
  display: grid;
}

div {
  margin: auto;
}

5.使用 CSS Grid 網(wǎng)格區(qū)域居中div

最后一個(gè)方法我們將深入探討Grid布局的強(qiáng)大功能，因?yàn)槲覀儗⒀芯績(jī)煞N方法來(lái)將div居中放置在具有多行和多列的網(wǎng)格中。

以下是我們的基本CSS：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
}

div {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

我們顯式地布局了一個(gè)網(wǎng)格，中間有一個(gè)區(qū)域來(lái)放置我們的div。我們現(xiàn)在甚至不需要在div上設(shè)置尺寸，因?yàn)榫W(wǎng)格軌跡會(huì)處理這個(gè)問(wèn)題。我們?cè)诰W(wǎng)格的中間指定一個(gè)網(wǎng)格單元格，其寬度為200px，高度為100px，然后我們告訴div從第二條網(wǎng)格線和第二條行線開(kāi)始。(默認(rèn)情況下，它將僅跨到每個(gè)方向上的下一條軸網(wǎng)線。）div元素被很好地放置在其容器的中心，如下所示。

下圖顯示了位于其網(wǎng)格軌跡內(nèi)的div。

網(wǎng)格布局提供了各種不同的方法來(lái)實(shí)現(xiàn)這一結(jié)果。最后我們做與上面相同的事情，但這次為我們的div使用一個(gè)命名區(qū)域：

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
  grid-template-areas: ".  .  ."
                       ". box ."
                       ".  .  .";
}

div {
  background: yellow;
  grid-area: box;
}

在這里，我們?cè)O(shè)置一個(gè)名為grid-area的box，然后描述它應(yīng)該位于網(wǎng)格上的什么位置，用一個(gè)簡(jiǎn)單的點(diǎn)（.）指定哪些網(wǎng)格單元格是空的。

這種布局方法的優(yōu)點(diǎn)是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網(wǎng)格布局的強(qiáng)大之處。

結(jié)論

這些方法中的每一個(gè)都允許我們?cè)谌萜髦兴胶痛怪钡鼐又幸粋€(gè)div。place-self和margin: auto選項(xiàng)很好，因?yàn)樗鼈冎苯討?yīng)用于居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，并且可以很好地完成這項(xiàng)工作。在各種場(chǎng)景中，我們可能希望將元素置于中心，因此擁有一系列工具來(lái)實(shí)現(xiàn)該目標(biāo)非常重要。

在演示示例中，我們只是使用了一個(gè)空的div，但是當(dāng)然我們可以向div添加內(nèi)容，居中仍然有效。而且這些居中技術(shù)同樣適用于div以外的元素。

最后

有興趣的可以看看原文，可以在線體驗(yàn)不同顏色格式是如何工作的。看完本文如果覺(jué)得有用，記得點(diǎn)個(gè)贊支持，收藏起來(lái)說(shuō)不定哪天就用上啦～

專注前端開(kāi)發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號(hào)：南城大前端（ID: nanchengfe）

前端面試中，CSS相關(guān)的問(wèn)題一般不會(huì)問(wèn)的太多，但是有一個(gè)問(wèn)題經(jīng)常被選為面試題。那就是：div 水平垂直居中你有哪些辦法？

這道題可以考察候選人對(duì)CSS布局方式的理解，而且非常貼近日常工作，比較適合作為面試題。今天我就幫大家梳理一下CSS實(shí)現(xiàn)div水平垂直居中的方法，建議收藏。

為了演示，首先創(chuàng)建兩個(gè)嵌套的 div，然后設(shè)置一下大小和背景顏色這樣比較容易看出效果。代碼如下：

// html
<div class="outer outer-box">
  <div class="inner inner-box"></div>
</div>

// css
<style>
.outer {
  height: 100px;
  width: 100px;
  background-color: royalblue;
}
.inner {
  height: 50px;
  width: 50px;
  background-color: red;
}
<style>

設(shè)置完的效果就是這樣，然后我們需要把內(nèi)部的div 水平垂直居中。準(zhǔn)備就緒，正式開(kāi)始。我們分別使用 Flex 布局，Position布局， Grid布局三種方式。

flex布局

Flex 是Flexible Box的縮寫(xiě)，意為”彈性布局”。Flexible Box 模型是一種一維的布局模型，一次只能處理一個(gè)維度上的布局。flex布局有兩根軸線，主軸和交叉軸。flex就是根據(jù)這兩個(gè)軸線布局元素。

1.1 對(duì)外層div設(shè)置flex布局

在外層 div 上設(shè)置 justify-content: center; align-items: center; 屬性， display 設(shè)置為 flex。即可實(shí)現(xiàn)水平垂直居中。

1.2 內(nèi)外div分別設(shè)置

結(jié)果如下圖：

Flex實(shí)現(xiàn)水平處置居中

Position布局

Position布局是傳統(tǒng)的布局方式，position屬性指定定位方式，利用CSS盒模型實(shí)現(xiàn)定位布局。

2.1 內(nèi)部div使用 margin 屬性居中

2.2 內(nèi)部 div 使用 transform 屬性居中

實(shí)現(xiàn)結(jié)果如下：

Grid布局

Grid（網(wǎng)格）布局被稱為最強(qiáng)大的CSS布局方案，它可以將一個(gè)頁(yè)面劃分為幾個(gè)主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系。

上面這種布局，Grid非常擅長(zhǎng)。Flex布局屬于一維布局，Grid布局可以將容器分為行和列，對(duì)單元格進(jìn)行布局，屬于二維布局。

3.1 外層div使用 place-content 屬性

3.2 外層div使用Grid布局

3.3 內(nèi)外div分別設(shè)置

實(shí)現(xiàn)結(jié)果如下：

總結(jié)

常見(jiàn)的問(wèn)題也不見(jiàn)得簡(jiǎn)單，前端知識(shí)還是常學(xué)常新的。了解不同類型的CSS布局方式，對(duì)處理實(shí)際問(wèn)題也很有幫助。

以上就是CSS實(shí)現(xiàn)div水平垂直居中的7種方式。如果你有別的方式，歡迎和大家一起分析。

如果覺(jué)得文章對(duì)您有幫助，歡迎收藏，轉(zhuǎn)發(fā)~

在線咨詢

上一篇：JavaScript簡(jiǎn)單版發(fā)布留言怎么做？
下一篇：前端三賤客-每個(gè)人都會(huì)碰到的問(wèn)題（html+css）

您的項(xiàng)目需求

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

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

「例」用div+css做一個(gè)簡(jiǎn)單的登錄界面 「204」

初始化