整合營銷服務商

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

          免費咨詢熱線:

          多個你不知道的 CSS 居中方案

          平居中

          1. 內聯元素

          要使內聯元素(如鏈接,span 或img)居中,使用 text-align: center 足夠了。

          <div class="desk">
             <span class="plate"></span>
          </div>
          .desk {
            text-align: center;
          }

          對于多個內聯元素,也可以使用text-align:center:

          <div class="desk">
             <span class="plate"></span>
             <span class="plate"></span>
          </div>
          .desk {
            text-align: center;
          }

          1. Flexbox

          使用 flexbox 也可以快速居中元素:

          .desk {
            	display: flex;
            	justify-content: center;
          }

          對于多個內聯的項目,也可以正常工作:


          1. CSS Grid

          使用網格容器時,圖中的盤子將根據其網格區域居中。 請注意,除非將它們包裹在一個元素中,否則這將不適用于多個盤子。

          .desk {
            display: grid;
            justify-content: center;
          }


          塊元素

          1. Auto Margin

          寬度和高度已知的塊元素可以通過設置margin-left:auto 和 margin-right:auto 居中元素。

          .plate {
            width: 120px;
            height: 120px;
           margin:0 auto;
          }

          對于多個塊元素,它們應該包裝在一個元素中,然后讓這個父元素居中。

          .tray {
            display: flex;
            margin-left: auto;
            margin-right: auto;
          }

          1. Flexbox

          對于 flexbox 同樣也是使用 justify-content:center 來居中元素:

          .desk {
            display: flex;
            justify-content: center;
          }

          對于多個元素,我們不需要將它們包裹在一個元素中,flexbox 可以將它們都居中。

          CSS定位

          通過絕對定位,我們可以輕松地通過CSS transform將其水平居中。

          .plate {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }

          在已知元素寬度的情況下,可以使用負邊距代替CSS transform。

          .plate {
            position: absolute;
            left: 50%;
            margin-left: -60px;
          }
          復制代碼

          垂直居中

          一、內聯元素

          1. Vertical Padding

          垂直居中元素最簡單的方法之一是使用padding:

            padding-top: 24px;
            padding-bottom: 24px;
          }

          1. Vertical Align

          vertical-align屬性可用于一個或多個元素。

          在此示例中,叉子和刀子應與桌子垂直居中。

          .desk {
            text-align: center;
          }
          
          .plate,
          .fork,
          .knife {
            vertical-align: middle;
          }
          1. Flexbox

          為了對齊盤子,叉子和刀,我們可以使用 flexbox:

          .desk {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          塊元素

          1. 絕對定位

          通過絕對定位元素,可以使用 CSS transform將元素垂直居中:

          .plate {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }

          如果知道元素高度,則可以使用負邊距代替transform。

          .plate {
            position: absolute;
            top: 50%;
            margin-top: -60px;
          }

          CSS Grid

          使用CSS網格,我們可以使用align-items將項目垂直于其網格區域居中。

          .desk {
            display: grid;
            align-items: center;
          }

          水平垂直居中

          一、內聯元素

          1. Padding 和Text Align
          .plate {
            text-align: center;
            padding-top: 24px;
            padding-bottom: 24px;
          }

          其他元素類型

          絕對定位

          .plate {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
          }
          

          Flexbox

          通過 justify-content:center 和 align-items:center 就可以將元素垂直水平居中:

          .plate {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          CSS Grid

          通過place-items屬性就可以通過,它結合了justify-content和align-items:

          .desk {
            display: grid;
            place-items: center;
          }

          本文轉載自網絡,僅供大家學習!

          感謝您的閱讀,如果對您有幫助,歡迎關注"CRMEB"頭條號。碼云上有我們開源的商城項目,知識付費項目,均是基于PHP+vue開發,學習研究歡迎使用,關注我們保持聯系!

          是poetry,點擊上方“關注”,每天為你分享前端進階與個人精進干貨。

          水平居中方案

          方案一:text-align + inline-block

          <div id="parent1">
           <div class="child">水平居中</div>
          </div>
          
          #parent1{
           text-align: center;
           background:#ddd;
           margin-bottom:20px;
          }
          #parent1 .child{
           display: inline-block;
           background:#666;
           color:#fff;
          }
          

          方案二:margin:0 auto

          <div id="parent2">
           <div class="child">水平居中</div>
          </div>
          
          #parent2{
           text-align: center;
           background:#ddd;
           margin-bottom:20px;
          }
          #parent2 .child{
           display: table;
           margin: 0 auto;
           background:#666;
           color:#fff;
          }
          
          

          方案三:absolute+transform

          <div id="parent3">
           <div class="child">水平居中</div>
          </div>
          
          #parent3{
           position: relative;
           background:#ddd;
           margin-bottom:20px;
          }
          #parent3 .child{
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           background:#666;
           color:#fff;
          }
          
          
          

          方案四:justify-content

          <div id="parent4">
           <div class="child">水平居中</div>
          </div>
          
          #parent4{
           display: flex;
           justify-content: center;
           background:#ddd;
           margin-bottom:20px;
          }
          #parent4 .child{
           margin:0 auto;
           background:#666;
           color:#fff;
          }
          
          

          垂直居中方案

          方案一: 利用 line-height 實現垂直居中

          • 這種方法適用于單行文本垂直居中,如果文本內容太長,出現了換行,換行后的內容會溢出
          <div id="example1">
              單行文字垂直居中
          </div>
          
          #example1 {
              height: 100px;
              line-height: 100px;
              background: #161616;
              color: #fff;
              width: 200px;
          }
          

          方案二 利用 display: table 實現垂直居中

          <div id="example2">
              <div class="inner">塊區域垂直居中</div>
          </div>
          
          #example2 {
              height: 100px;
              background: #161616;
              color: #fff;
              width: 400px;
              overflow: hidden;
              display: table;
             margin-bottom:20px;
          }
          #example2 .inner{
              display: table-cell;
              vertical-align: middle;
              height: 50px;
              background:#999;
          }
          

          方案三 margin 填充 這種方法需要知道內外容器的大小

          <div id="example3">
              <div class="inner">塊區域垂直居中</div>
          </div>
          
          #example3 {
              height: 100px;
              background: #161616;
              color: #fff;
              width: 400px;
              overflow: hidden;
             margin-bottom:20px;
          }
          #example3 .inner{
              margin-left: auto;
              margin-right: auto;
              margin-top: calc((100px - 50px)/2);
              height: 50px;
              background:#999;
          }
          

          方案四:經典 absolute 布局上下文垂直居中

          <div id="example4">
              <div class="inner">塊區域垂直居中</div>
          </div>
          
          #example4 {
              width: 400px;
              height: 100px;
              background: #161616;
              color: #fff;
              position: relative;
            margin-bottom:20px;
          }
          #example4 .inner{
              height: 50px;
              width: 200px;
              position: absolute;
              left: 50%;
              top: 50%;
              margin-top: -25px;
              margin-left: -100px;
              background:#999;
          }
          

          方案五:absolute+transform

          <div id="example5">
              <div class="inner">塊區域垂直居中</div>
          </div>
          
          #example5 {
              width: 400px;
              height: 100px;
              background: #161616;
              color: #fff;
              position: relative;
           margin-bottom:20px;
          }
          #example5 .inner{
              position: absolute;
              left: 50%;
              top: 50%;
              background: #999;
              transform: translateX(-50%) translateY(-50%);
          }
          

          方案六 利用margin:auto 居中

          <div id="expample6">
              <div class="inner">Content here</div>
          </div>
          
          #expample6 {
              width: 400px;
              height: 100px;
              background: #eee;
              position: relative;
            margin-bottom:20px;
          }
          
          #expample6 .inner {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              height: 50px;
              width: 70%;
              background: #aaa;
              color:#222;
          }
          
          

          方案七 利用 Flex布局 居中

          <div id="expample7">
              <div class="inner">Content here</div>
          </div>
          
          #expample7 {
              width: 400px;
              height: 100px;
              background: #eee;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          
          #expample7 .inner {
              height: 50px;
              width: 70%;
              background: #aaa;
              color:#222;
          }

          作者介紹:poetry,專注前端進階寫作與個人精進干貨,目前在上市公司負責小程序等相關的研發。

          css水平垂直居中一直是一個亙古不變的話題,它常常出現在優美的網頁上以及各大前端面試當中。說來慚愧,在兩年前面試的時候,我完全不知道如何做到水平和垂直均居中的方法,那場面別提有多尷尬了(特想找個地洞鉆進去)。現在都2022年了,這些技巧現在已經不是技巧了吧,只是好記性不如爛筆頭,還是乖乖記下來吧,得把它玩透才行!

          注:文中例子沒寫明html代碼時,使用的是下面結構:

          <div class="example example14">
              <div class="con">
                  超級好用超級放心    
                  <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
                  <span>壓縮完可以 </span> 
              </div>
          </div>
          

          只是類名會有所不同。

          1、line-height

          適用:單行文字(垂直居中)
          原理:將單行文字的行高設定后,文字會位于行高的垂直中間位置。

          // html
          <div class="example">Lorem ipsam.</div>
          // css
          .example{
              width: 400px;
              background: #afddf3;
              line-height: 50px;
          }
          

          效果:

          2、line-height + inline-block

          原理:將多個元素或多行元素當成一個行元素來看待,所以我們必須要將這些數據多包一層,并將其設定為 inline-block。由于inline-block在不同瀏覽器會有空隙產生,因此設定父元素font-size:0來消除,從而達到完美的垂直居中。

          .example2{
              width: 400px;
              border: 1px solid #dcdcdc;
              line-height: 100px;
              font-size: 0;
          }
          .example2 .con {
              display: inline-block;
              line-height: 2;
              vertical-align: middle;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          3、:before + inline-block

          原理::before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統的垂直居中的技巧了,此方式的好處在于子元素居中可以不需要特別設定高度,我們將利用:before偽類元素設定為100%高的inline-block,再搭配上將需要居中的子元素同樣設置成inline-block性質后,就能使用vertical-align: middle來達到垂直居中的目的了,此方式在以往其實是個非常棒的垂直居中解決方案,唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷,不用怕,設置父元素font-size: 0,子元素font-size: 15px即可。

          // css
          .example3 {
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example3::before {
              content: '';
              display: inline-block;
              height: 100%;
              width: 0;
              vertical-align: middle;
          }
          .example .con {
              width: 300px;
              font-size: 15px;
              background: #afddf3;
              display: inline-block;
              vertical-align: middle;
          }
          

          效果:

          4、table + margin

          適用情景:單對象(水平居中)
          原理:將子元素設置塊級表格,再設置水平居中。

          .example4 {
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example .con {
              display: table;
              margin: 0 auto;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          5、table + table-cell + vertical-align: middle

          適用情景:多對象(垂直居中)

          // html
          <div class="example example5">
              <div class="con">
                  超級好用超級放心    
                  <a href="https://tinypng.com/" target="_blank">在線壓縮圖片</a>
                  <span>壓縮完可以打包下載哦 </span> 
              </div>
              <div class="con">
                  CSS-TRICKS
              </div>
          </div>
          
          // css
          .example5 {
              display: table;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example .con {
              display: table-cell;
              vertical-align: middle;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          6、absolute + margin 負值(推薦)

          原理:設置絕對定位,top: 50%;后,再設置高度一半的負值實現。說來說去,這就是一道簡單的數學題而已。
          缺陷:需要設置居中元素的高度。

          .example6 {
              position: relative;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example6 .con {
              position: absolute;
              top: 50%;
              height: 80px;
              margin-top: -40px;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          7、absolute + margin auto(推薦)

          原理:當元素設置為絕對定位后,它就抓不到整體可運用的空間范圍,所以margin: auto會失效,但當你設置了top:0;bottom:0;時,絕對定位元素就抓到了可運用的空間了,這時你的margin:auto就生效了。
          缺陷:定位元素必須有固定的寬高(百分比也算)。 tips:上下左右四個方向要設置成一樣的值。

          .example7 {
              position: relative;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example7 .con {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              height: 80px;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          8、absolute + translate(推薦)

          原理:利用絕對定位時的top 與right設置元素的上方跟左方各為50%,再利用 transform: translate(-50%, -50%);位移居中元素自身寬與高的50%就能達成居中的目的了。
          顯著優勢:無需固定定位元素的寬高。

          .example8 {
              position: relative;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example8 .con {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          9、Flex + align-items(推薦)

          適用情景:多行文字(垂直居中)
          原理:彈性布局,align-items定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式,參考CSS-TRICKS

          .example9 {
              display: flex;
              align-items: center;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example9 .con {
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          10、Flex + justify-content(推薦)

          適用情景:多行文字(水平居中)
          原理:彈性布局,justify-content設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式,參考CSS-TRICKS

          .example10 {
              display: flex;
              justify-content: center;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example .con {
              height: 80px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          11、Flex + :before + flex-grow

          適用情景:多行文字(垂直居中)
          原理:彈性布局,Flex-direction:column;將項目垂直顯示,正如一個列一樣。flex-grow: [number];規定項目將相對于其他靈活的項目進行擴展的量,參考CSS-TRICKS

          .example11 {
              display: flex;
              flex-direction: column;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example11:before {
              content: '';
              flex-grow: .5;
          }
          .example11 .con {
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          12、Flex + margin(推薦)

          .example12 {
              display: flex;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example12 .con {
              margin: auto;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          13、Flex + align-self

          原理:align-self定義flex子項單獨在側軸(縱軸)方向上的對齊方式。

          .example13 {
              display: flex;
              justify-content: center;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example13 .con {
              align-self: center;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          14、Flex + align-content

          原理:align-content在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項(垂直),彈性項目有多項此屬性才會發揮作用。

          .example14 {
              display: flex;
              align-content: center;
              flex-wrap: wrap;
              margin-top: 10px;
              width: 400px;
              height: 150px;
              font-size: 0;
              border: 1px solid #dcdcdc;
          }
          .example14:before, .example14:after {
              content: "";
              display: block;
              width: 100%;
          }
          .example14 .con {
              height: 80px;
              width: 300px;
              font-size: 15px;
              background: #afddf3;
          }
          

          效果:

          以上就是我總結的css垂直或者水平居中技巧了。下面是一個比較常見的例子,往往是不想讓圖片發生變形并且不管尺寸大小均會顯示在容器的正中央(以下例子應用的是第8條)。

          <div class="imgbox-box">
             <div class="imgbox">
                 <img src="imgs/head.jpeg" alt="">
             </div>
             <div class="imgbox">
                 <img src="imgs/head.jpeg" alt="">
             </div>
             <div class="imgbox">
                 <img src="imgs/head.jpeg" alt="">
             </div>
          </div>
          
          .imgbox-box {
              display: flex;
              justify-content: center;
              margin-bottom: 40px;
          }
          .imgbox {
              width: 200px;
              height: 200px;
              position: relative;
              background: #ebf8ed;
              overflow: hidden;
          }
          .imgbox img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              max-width: 100%;
              max-height: 100%;
          }
          

          效果:

          結語

          上面例子中,有些是水平居中,有些是垂直居中,將它們某兩個合在一起就能實現水平和垂直均居中。不過我相信肯定不止這些方法,還有其他的值得我們去探究。若文中有錯,請大家指正,謝謝!


          主站蜘蛛池模板: 中文字幕一区二区精品区| 中文字幕一区在线观看| 亚洲一区二区三区四区视频| 一区二区三区免费视频播放器| 天天看高清无码一区二区三区 | 大伊香蕉精品一区视频在线| 国产在线视频一区二区三区| 高清一区二区在线观看| 搜日本一区二区三区免费高清视频| 一区二区三区免费在线视频| 一区二区三区精品高清视频免费在线播放| 日本在线观看一区二区三区| 中文字幕一区二区免费| 无码国产精品一区二区免费vr | 中文字幕人妻AV一区二区| 无码人妻精品一区二区三区久久久| 精品少妇ay一区二区三区| 国产亚洲综合精品一区二区三区 | 国产精品 一区 在线| 亚洲AV综合色区无码一区爱AV | 免费人妻精品一区二区三区| 一区二区三区福利视频免费观看| 国产99视频精品一区| 亚洲中文字幕丝袜制服一区 | 国产品无码一区二区三区在线| 国产成人精品一区二三区 | 日韩免费一区二区三区在线| 久久久久人妻一区精品果冻| 国产美女一区二区三区| 中文字幕一区二区三区永久| 性色av无码免费一区二区三区 | 一区二区三区在线观看免费| 精品国产一区二区三区久久久狼| asmr国产一区在线| 麻豆精品人妻一区二区三区蜜桃| 久久99精品一区二区三区| 亚洲美女高清一区二区三区| 国产在线一区二区三区av| 无码视频免费一区二三区| 91福利一区二区| 99久久精品日本一区二区免费 |