整合營銷服務商

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

          免費咨詢熱線:

          css篇-前端面試中常問的div居中方法

          上又要到秋招的時候了,又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法,這里給大家總結一下都有哪些常用的方法。

          絕對定位

          • 父級元素(parent)采用相對定位(relative),需要居中的元素(demo)采用絕對定位(absolute)。
          • 居中元素向上偏移50%,向左偏移50%,此時左頂點位于中心,不過我們需要的是整體居中,所以在偏移自身一半的寬高。(如下圖)

          還未偏移一半自身寬高

          <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居中

          在子元素不知道自身寬高情況,使用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布局

          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布局是傳統的布局方式,position屬性指定定位方式,利用CSS盒模型實現定位布局。

          2.1 內部div使用 margin 屬性居中

          2.2 內部 div 使用 transform 屬性居中

          實現結果如下:

          Grid布局

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

          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)


          主站蜘蛛池模板: 四虎精品亚洲一区二区三区| 亚洲av日韩综合一区在线观看| 麻豆视频一区二区三区| 精品一区二区久久久久久久网站| 亚洲AV成人精品日韩一区| 精品视频一区二区三区在线观看| 亚洲AV无码一区二三区| 精品天海翼一区二区| 日本一区二区三区不卡视频| 日韩av无码一区二区三区| 国产免费一区二区视频| 国产一在线精品一区在线观看| 日韩av片无码一区二区三区不卡 | 91在线一区二区| 日韩一本之道一区中文字幕| 一区二区高清在线观看| 色一情一乱一伦一区二区三区| 国产一区二区三区在线看片 | 国产无码一区二区在线| 精品女同一区二区| 变态调教一区二区三区| 国产韩国精品一区二区三区| 亚洲日本中文字幕一区二区三区| av无码精品一区二区三区四区 | 中文字幕一区二区三| 国产免费一区二区三区免费视频| 一区二区国产在线播放| 国产一区二区三区在线视頻| 少妇人妻偷人精品一区二区| 国产午夜精品一区二区三区| 一区高清大胆人体| 国产日本亚洲一区二区三区| 国产激情一区二区三区小说| 国产一区二区三区樱花动漫| 久久国产三级无码一区二区| 久久精品一区二区三区不卡| 91精品福利一区二区| 国产精品电影一区二区三区| 国产91一区二区在线播放不卡| 亚洲人成人一区二区三区| 无码国产精品一区二区免费式影视 |