<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垂直居中的幾種實現方式

          時間:?2019-08-13閱讀:?369標簽:?居中

          相比較水平居中,垂直居中比較復雜點。尤其是在實際頁面中,有很多特殊的場景,導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例:一個200*200的div在一個div水平垂直居中,用css實現。


          首先定義元素

          <!--dom層:和垂直居中無關的樣式直接定義在style里。-->
          <body>
              <div class="margin" style="width: 500px;height: 500px;background-color: aqua">
                  <div class="center" style="width: 200px;height: 200px;background-color: antiquewhite"></div>
              </div>
          </body> 
          


          1.百分比的方式

          缺點:必須知道居中元素的實際大小。根據實際大小用margin進行調整,因為top,left是以元素的上邊框進行計算的。

          <style>
              .center {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -100px;
                margin-left: -100px;
              }
              
              .margin{
                position: relative;    //外層元素必須定義為relative,否則是相對整個屏幕水平垂直居中
              }
          </style> 
          
          


          2.百分比結合transform

          優點:利用transform改良上面那種必須知道元素大小的限制。

          <style>
              .center{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
              
              .margin{
                position: relative;
              }
          </style> 


          3.flex布局

          Flex布局(彈性布局),作為css3新增的布局方式,能很好的支持不同的屏幕大小,絕對是現在的前端工程師必備技能。

            <style>
              .margin {
                      display: flex;
                      justify-content: center;
                      align-items: Center;
                  }
            </style>


          4.flex布局結合margin

              .margin{
                      display: flex;
                  }
                  
              .center{
                      margin: auto;
                  }


          5.絕對定位和0

              .margin{
                      position: relative;
                  }
          
              .center{
                      overflow: auto;
                      margin: auto;
                      position: absolute;
                      top: 0; left: 0; bottom: 0; right: 0;
                 }
          吐血推薦

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

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

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

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

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

          CSS中實現圖片垂直居中

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

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

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

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

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

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

          第一種:定位+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

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

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