整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「CSS三種居中方案全解」CSS垂直居中常用方法集結


          、CSS 垂直居中

          1、父元素display:table-cell;vertical-align:center,里面的子元素就會實現垂直居中,不需要知道子元素的寬高

          /* 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>
          復制代碼
          • 效果展示


          2、absolute+margin:auto,定位為 absolute 的元素垂直居中,不需要知道該元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          3、absolute+負margin,定位為 absolute 的元素垂直居中,需要知道該元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          4、absolute+calc(css3計算屬性),定位為 absolute 的元素垂直居中,需要知道該元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          5、absolute+transform,定位為 absolute 的元素垂直居中,不需要知道元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          6、line-height,父元素:line-height=height。子元素:display:inline-block。子元素垂直居中,不需要知道子元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          7、flex,目前主流的布局方案,父元素為 flex 容器且添加 align-items: center,控制子元素的布局。不需要知道子元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示

          8、grid ,目前最強大的布局方案,使用還尚未流行。父元素為 grid,子元素添加 align-self: center。不需要知道子元素的寬高

          <!-- 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>
          復制代碼
          • 效果展示


          9、偽元素after或before,這是我搜出來整理的。CSS 真的太神(s)奇(d)了,毫無道理。子元素垂直居中不需要知道寬高

          <!-- 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>
          復制代碼
          • 效果展示


          10、隱藏節點(盒子)實現 該原理就是使用盒子占位置,但不顯示出該盒子。另外的盒子垂直居中,子盒子的寬高需由實際計算時確定

          <!-- 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>
          復制代碼
          • 效果展示


          11、writing-mode,這是搜索整理而來,參考資料見最后。子元素盒子 display: inline-block。子元素垂直居中,不需要知道該盒子的寬高

          <!-- 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居中的各種方法。

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

          place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用于將網格項置于其網格單元格的中心。

          將div居中就像這樣簡單:

          article {
            display: grid;
          }
          
          div {
            place-self: center;
          }
          

          place-self屬性是justify-self(水平)和align-self(垂直)屬性的簡寫。

          使用place-self對于在網格內居中單個項目特別有用,因為它使其他網格項目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法,繼續看看其他的一些方法。

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

          place-items屬性是justify-items(水平)和align-items(垂直)的簡寫。這些屬性應用于網格容器而不是每個網格項,當我們希望所有網格項具有相同的位置時,這些屬性非常有用。

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

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

          我們可以基于初始代碼添加更多的div元素,看看會發生什么。結果是每個div將在其網格單元格內水平和垂直居中,如下圖所示(通過瀏覽器的網格檢查器)。

          3.使用 place-content 居中Div

          place-content屬性是justify-content(水平)和align-content(垂直)的簡寫。雖然place-selfplace-items控制網格項如何放置在其指定的網格單元格中,但place-content指定網格容器的整個內容應如何對齊(即,所有網格項被視為一個組)。在我們的演示中,只有一個網格項(我們的單個黃色div),因此我們也可以使用place-content將其置于其容器的中心。

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

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

          這里有幾點需要注意。到目前為止,在所有的例子中我們都使用了center的值。但是到目前為止,我們已經探索的每個屬性都有各種其他的放置物品的值。place-content有很多值,另外兩個值也可以用于居中我們的div:space-aroundspace-evenly

          此外,在我們的簡單例子中,一個div在容器中居中,我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-contentalign-items來居中div,有興趣的可以嘗試看看。

          4.使用 CSS Grid 和 Auto Margins 居中

          像往常一樣,我們將使用display: grid來定位父容器。我們還將使用margin: auto為div指定自動邊距。這使瀏覽器自動計算div周圍的可用空間,并在其網格單元格內垂直和水平劃分,將div放置在中間:

          article {
            display: grid;
          }
          
          div {
            margin: auto;
          }
          

          5.使用 CSS Grid 網格區域居中div

          最后一個方法我們將深入探討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-selfmargin: 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!


          主站蜘蛛池模板: 久久一区二区精品综合| 一区二区传媒有限公司| 色噜噜狠狠一区二区三区| 国模无码一区二区三区不卡| 国产精品美女一区二区三区| 亚洲视频一区调教| 视频一区精品自拍| 精品国产不卡一区二区三区| 成人区人妻精品一区二区不卡| 3d动漫精品成人一区二区三| 无码国产伦一区二区三区视频| 中文字幕在线一区| 精品一区二区三区四区在线| 久久综合亚洲色一区二区三区| 99久久精品国产高清一区二区| 国产vr一区二区在线观看| 一区二区三区亚洲视频| 国产福利一区视频| 欧洲精品码一区二区三区免费看| 国产成人无码精品一区不卡| 日本免费电影一区| 冲田杏梨高清无一区二区| 一区五十路在线中出| 精品无码中出一区二区| jazzjazz国产精品一区二区| 91国在线啪精品一区| 久久久久一区二区三区| 亚洲欧洲一区二区| 亚洲一区二区三区写真| 无码国产精品一区二区高潮| 国产精品一区二区在线观看| 一区二区三区免费视频网站| 久久久国产一区二区三区| 久久一区二区三区精品| 精品无码一区二区三区亚洲桃色| 影音先锋中文无码一区| 国产一区二区三区精品久久呦| 日本一区二区三区在线网| 亚洲色欲一区二区三区在线观看| 无码精品一区二区三区在线| 综合无码一区二区三区四区五区|