<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css樣式——完美解決div水平居中及div水平垂直居中的方法總結

          時間:?2019-07-21閱讀:?3978標簽:?居中

          在我們網頁開布局中,經常遇到div元素的垂直居中或者水平居中。這篇文章總結一下使用的方法。  

          div水平居中

          1.通過margin:auto的方式

          .div{
            margin:auto;   
            width:60%;    
          }

          2.通過text-align的方式

          .boxdiv{
               text-align:center;
          }
          .boxdiv  .div{
               display:inline-block;
          }

          3.通過定位的方式

          .div{
          	position: absolute;
          	width: 100px;
          	left: 50%;
          	margin-left: -50px;/*寬度值/2*/
          }


          div垂直水平居中

          1.通過table-cell(vertical-align的百分比值是相對于line-height計算的)

          .boxdiv{
              width:400px;
              height:400px;
              display:table-cell;
              vertical-align:middle;
              text-align: center;
          }
          .boxdiv .div{
              width:200px;
              height:200px;
              display:inline-block;
          }

          2..絕對定位方式+四個方向置0(需設置子元素寬高,否則子元素將與父元素寬高一致)

          .boxdiv{
                    width:400px;
                    height:400px;
                    position:relative;
          }
           .boxdiv .div{
                      width:200px;
                      height:200px;
                      margin: auto;  
                      position: absolute;  
                      top: 0; left: 0; bottom: 0; right: 0; 
          }

          3.通過定位+maring偏移

          .boxdiv{
                      width:400px;
                      height:400px;
                      position:relative;
           }
           .boxdiv .div{
                    width:300px;
                     height:200px;
                     margin:auto;
                     position:absolute;
                     left:50%;
                     top:50%;
                     margin-left: -150px;
                     margin-top:-100px;
          }

          4.通過css3的flex(存在兼容性問題,適合移動端)

          .divbox{
              width:400px;
              height:400px;
              display: -webkit-flex;
              display: flex;
              -webkit-align-items: center;
              align-items: center;
              -webkit-justify-content: center;
              justify-content: center;
          }
           .divbox .div{
              width:200px;
              height:200px;
              background-color: red;
          }

          5.absolute+transform

          <div class="parent">
            <div class="child">Demo</div>
          </div>
          
          <style>
            .parent {
              position: relative;
            }
            .child {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          </style>

          6.box-alignandbox-pack 屬性(IE不支持)

          .parent{
              position: relative;
              top: 0; left: 0; right: 0; bottom: 0;
              display: -webkit-box;
              -webkit-box-align: center;
              -webkit-box-pack: center;
          }
          .child{
              -webkit-box-flex: 0;
          }


          div的水平和垂直居中方法總結基本就這些了。如果你有更好的,或者更巧妙的解決方案,歡迎留言~~~~


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/23

          CSS實現垂直居中的5種方法

          利用 CSS 來實現對象的垂直居中有許多不同的方法,比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎么來創建一個好的居中網站。使用 CSS 實現垂直居中并不容易。有些方法在一些瀏覽器中無效。

          設置 letter-spacing 后文字不能居中的解決方法

          今天才發現,給文字設置 letter-spacing 再設置 text-align: center; ,文字會整體往左偏移,不能居中。 給文字嵌套了一個 span 標簽,再選擇文字可以看出,letter-spacing 給每個字的右邊都加了一個間距。

          CSS 不定寬高的垂直水平居中方式總匯

          垂直居中,在 CSS 中是一個老生常談的問題,面試的時候也會時常被提及。所以,今天我們就來聊聊 9 種不同的居中方法。有常見的 flex、transform、absolute 等等。也有 CSS3 的網格布局。還有偽元素的方法,是的,你沒有看錯

          CSS中實現圖片垂直居中

          在曾經的 淘寶UED 招聘 中有這樣一道題目:使用純CSS實現未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中。當然出題并不是隨意,而是有其現實的原因

          css垂直居中的幾種實現方式

          相比較水平居中,垂直居中比較復雜點。尤其是在實際頁面中,有很多特殊的場景,導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式

          div元素寬度不定的情況下如何居中顯示

          方法一:兼容IE67,但是當元素寬度大于50%時,會出現滾動條。外層使用text-align為center是為了讓里面的內聯元素居中,很顯然在外層設置text-align:center后

          如何讓子元素在父元素中水平垂直居中七種方法?

          第一種:定位+margin:auto,注意:兼容性較好,缺點:不支持IE7以下的瀏覽器.第二種:定位+margin-left+margin-top注意:兼容性好;缺點:必須知道元素的寬高,第三種:定位+transfrom

          css中line-height的理解_介紹line-height實際應用

          css中line-height行高是指文本行基線之間的距離,不同字體,基線位置不同。line-height只影響行內元素和其他行內內容,而不會直接影響塊級元素。line-height實際應用:圖片水平垂直居中、多行文本水平垂直居中、用line-height代替height

          安卓移動端line-height垂直居中出現偏移的原因,及解決方法

          目前在移動端安卓手機上使用line-height屬性,讓它的值等于height,結果發現是不居中的。出現了一定位置的偏移情況,如果略微只有兩三個像素差距是看不出來的。

          css圖片居中,通過純css實現圖片居中的多種實現方法

          在網頁布局中,圖文排版是我們常用的,那么經常會遇到如何讓圖片居中顯示呢,這篇文章將總結常用css實現圖片居中的方法總結。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网