上又要到秋招的時候了,又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法,這里給大家總結一下都有哪些常用的方法。
還未偏移一半自身寬高
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
width: 100px;
height: 100px;
border: solid blue 1px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
通過flex彈性布局設置垂直居中和水平居中
<style>
.parent {
width: 500px;
height: 500px;
border: solid red 1px;
display: flex;
// 垂直,水平居中
align-items: center;
justify-content: center;
}
.demo {
width: 100px;
height: 100px;
border: solid blue 1px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
在子元素不知道自身寬高情況,使用transform進行比偏移。
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
border: solid blue 1px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="demo">居中</div>
</div>
</body>
以上3種是常用的方法,當然還有其他居中方法比如grid布局,table-cell布局等。
前端面試中,CSS相關的問題一般不會問的太多,但是有一個問題經常被選為面試題。那就是:div 水平垂直居中你有哪些辦法?
這道題可以考察候選人對CSS布局方式的理解,而且非常貼近日常工作,比較適合作為面試題。今天我就幫大家梳理一下CSS實現div水平垂直居中的方法,建議收藏。
為了演示,首先創建兩個嵌套的 div,然后設置一下大小和背景顏色這樣比較容易看出效果。代碼如下:
// 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>
設置完的效果就是這樣,然后我們需要把內部的div 水平垂直居中。準備就緒,正式開始。我們分別使用 Flex 布局,Position布局, Grid布局三種方式。
Flex 是Flexible Box的縮寫,意為”彈性布局”。Flexible Box 模型是一種一維的布局模型,一次只能處理一個維度上的布局。flex布局有兩根軸線,主軸和交叉軸。flex就是根據這兩個軸線布局元素。
1.1 對外層div設置flex布局
在外層 div 上設置 justify-content: center; align-items: center; 屬性, display 設置為 flex。即可實現水平垂直居中。
1.2 內外div分別設置
結果如下圖:
Flex實現水平處置居中
Position布局是傳統的布局方式,position屬性指定定位方式,利用CSS盒模型實現定位布局。
2.1 內部div使用 margin 屬性居中
2.2 內部 div 使用 transform 屬性居中
實現結果如下:
Grid(網格)布局被稱為最強大的CSS布局方案,它可以將一個頁面劃分為幾個主要區域,以及定義這些區域的大小、位置、層次等關系。
上面這種布局,Grid非常擅長。Flex布局屬于一維布局,Grid布局可以將容器分為行和列,對單元格進行布局,屬于二維布局。
3.1 外層div使用 place-content 屬性
3.2 外層div使用Grid布局
3.3 內外div分別設置
實現結果如下:
常見的問題也不見得簡單,前端知識還是常學常新的。了解不同類型的CSS布局方式,對處理實際問題也很有幫助。
以上就是CSS實現div水平垂直居中的7種方式。如果你有別的方式,歡迎和大家一起分析。
如果覺得文章對您有幫助,歡迎收藏,轉發~
文翻譯自 How to Center a Div Using CSS Grid,作者:Fimber Elemuwa, Ralph Mason。 略有刪改
在本文中,我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法,當然這些技術可用于任何類型的元素。
我們首先創建一個容器,其中包含一個簡單的div元素,我們將使用它來演示這些居中方法。下面是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>元素建立為網格容器,并為該容器生成塊級網格。我們已經將網格容器設置為寬(width: 100%)和高(min-height: 100vw),這樣我們的div就有足夠的空間在其中移動。
接下來讓我們來看看將div居中的各種方法。
place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用于將網格項置于其網格單元格的中心。
將div居中就像這樣簡單:
article {
display: grid;
}
div {
place-self: center;
}
place-self屬性是justify-self(水平)和align-self(垂直)屬性的簡寫。
使用place-self對于在網格內居中單個項目特別有用,因為它使其他網格項目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法,繼續看看其他的一些方法。
place-items屬性是justify-items(水平)和align-items(垂直)的簡寫。這些屬性應用于網格容器而不是每個網格項,當我們希望所有網格項具有相同的位置時,這些屬性非常有用。
將以下CSS代碼添加到父容器:
article {
display: grid;
place-items: center;
}
我們可以基于初始代碼添加更多的div元素,看看會發生什么。結果是每個div將在其網格單元格內水平和垂直居中,如下圖所示(通過瀏覽器的網格檢查器)。
place-content屬性是justify-content(水平)和align-content(垂直)的簡寫。雖然place-self和place-items控制網格項如何放置在其指定的網格單元格中,但place-content指定網格容器的整個內容應如何對齊(即,所有網格項被視為一個組)。在我們的演示中,只有一個網格項(我們的單個黃色div),因此我們也可以使用place-content將其置于其容器的中心。
將以下CSS代碼添加到父容器:
article {
display: grid;
place-content: center;
}
這里有幾點需要注意。到目前為止,在所有的例子中我們都使用了center的值。但是到目前為止,我們已經探索的每個屬性都有各種其他的放置物品的值。place-content有很多值,另外兩個值也可以用于居中我們的div:space-around和space-evenly。
此外,在我們的簡單例子中,一個div在容器中居中,我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來居中div,有興趣的可以嘗試看看。
像往常一樣,我們將使用display: grid來定位父容器。我們還將使用margin: auto為div指定自動邊距。這使瀏覽器自動計算div周圍的可用空間,并在其網格單元格內垂直和水平劃分,將div放置在中間:
article {
display: grid;
}
div {
margin: auto;
}
最后一個方法我們將深入探討Grid布局的強大功能,因為我們將研究兩種方法來將div居中放置在具有多行和多列的網格中。
以下是我們的基本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;
}
我們顯式地布局了一個網格,中間有一個區域來放置我們的div。我們現在甚至不需要在div上設置尺寸,因為網格軌跡會處理這個問題。我們在網格的中間指定一個網格單元格,其寬度為200px,高度為100px,然后我們告訴div從第二條網格線和第二條行線開始。(默認情況下,它將僅跨到每個方向上的下一條軸網線。)div元素被很好地放置在其容器的中心,如下所示。
下圖顯示了位于其網格軌跡內的div。
網格布局提供了各種不同的方法來實現這一結果。最后我們做與上面相同的事情,但這次為我們的div使用一個命名區域:
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;
}
在這里,我們設置一個名為grid-area的box,然后描述它應該位于網格上的什么位置,用一個簡單的點(.)指定哪些網格單元格是空的。
這種布局方法的優點是,它可以很容易地將許多其他元素放置在我們想要的任何地方,這就是網格布局的強大之處。
這些方法中的每一個都允許我們在容器中水平和垂直地居中一個div。place-self和margin: auto選項很好,因為它們直接應用于居中的元素,而不是其容器。但是本文中介紹的所有方法都是高效的,并且可以很好地完成這項工作。在各種場景中,我們可能希望將元素置于中心,因此擁有一系列工具來實現該目標非常重要。
在演示示例中,我們只是使用了一個空的div,但是當然我們可以向div添加內容,居中仍然有效。而且這些居中技術同樣適用于div以外的元素。
有興趣的可以看看原文,可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用,記得點個贊支持,收藏起來說不定哪天就用上啦~
專注前端開發,分享前端相關技術干貨,公眾號:南城大前端(ID: nanchengfe)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。