/* HTML */
<div class='father'>
<div class='son'></div>
</div>
<style>
.father {
display: table-cell;
vertical-align: middle;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
background-color: aqua;
width: 50px;
height: 50px;
top: 0;
bottom: 0;
margin: auto;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
/* 負margin須是高度的一半 */
margin-top: -50px;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
/* 注意"-"兩邊要隔開 減去的須是高度的一半*/
top: calc(50% - 50px);
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
transform: translateY(-50%);
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
line-height: 300px;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
align-items: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: grid;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
align-self: center;
}
</style>
復制代碼
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: block;
}
.father::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.son {
background-color: aqua;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
}
</style>
復制代碼
<!-- HTML -->
<div class="father">
<div class="hide"></div>
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
background-color: aqua;
width: 50%;
height: 50%;
}
.hide {
width: 50px;
height: 25%;
}
</style>
復制代碼
<!-- HTML -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
writing-mode: horizontal-tb;
display: inline-block;
}
</style>
復制代碼
作者:soloplayer
鏈接:https://juejin.cn/post/6904138129612439560
來源:掘金
文翻譯自 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)
習css大家是不是對元素居中的知識點很是模糊?是不是苦于找不到一個總結的通俗易懂的說明?是不是自己懶得去總結?今天小編在前端的學習與實踐中總結出的元素的五大居中方式,黏貼了代碼并對代碼做了解釋,希望對迷茫的有所幫助!
下面的居中示例中,統一使用了同一個div作為父元素和p作為子元素
設置一個div,并且設置了div的寬高邊框,div里面設置一個塊元素p,設置了它的寬高和背景色
css居中方式1
這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個偽元素,并使得樣式為inline-block;height:100%;就是和父元素一樣高,vertical-align:middle;垂直居中,也就是p元素相對與偽元素居中,由于偽元素和div一樣高,所以相當于p元素在div里垂直居中。
css居中方式2
這里利用了定位居中
子元素p設置position:absolute脫離文檔流,默認以html作為父元素,所以我們給父元素div設置position:relative;使得p以div為父元素做位置的變動,left:0;tight:0;top:0;bottom:0;(只有設置了定位的元素才可以使用這種方式來移動),最后margin:auto;就會水平和垂直都居中。
css居中方式3
這里利用了彈性盒居中
父元素div設置成彈性盒樣式,justify-content:center;主軸居中
align-items:center;垂直居中(而且這兩個只能設置在父元素上,彈性盒知識)
css居中方式4
利用定位線左上角居中,然后左移子元素寬度的一半,再上移子元素高度的一半。
css居中方式5
利用動畫移動屬性transform
小編是一個有著5年工作經驗的架構師,關于web前端,自己有做材料的整合,一個完整學習web前端的路線,學習材料和工具。需要的伙伴可以私信我,發送“前端”等3秒后就可以獲取領取地址,免費送給大家。對于學習web前端有任何問題(學習方法,學習效率,如何就業)都可以問我。希望你也能憑自己的努力,成為下一個優秀的程序員!
相信看了上面的有關Html5、css的元素五大居中方式,你們就可以解決自己的小問題了,但是也要養成一個總結的好習慣。好記性不如爛筆頭!以前留下來的話語總是有他的道理。Comeon!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。