整合營銷服務商

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

          免費咨詢熱線:

          用CSS讓DIV上下左右居中的方法

          容導讀

          當父div的行高等于自身高度時,內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。所以需要對父div的 line-height 進行調整。利用定位屬性(top、left、right、bottom)百分比的模式。若為100%,則代表偏移的長度為父div的高度(寬度)的100%。定位屬性top和bottom(或是left和right)值分別設置為0,但子div有固定高度(寬度),并不能達到上下(左右)間距為0,此時給子div設置 margin:auto 會使它居中顯示。

          轉載自喜歡JS的無名小站

          例如 一個父div(w:100%;h:400px)中有一個子div(w:100px;100px;)。讓其上下左右居中。

          方法一(varticle-align

          理念

          利用表格單元格的居中屬性。

          步驟

          • 父div外層配置一個div,同時設置為表格元素 (display: table),寬度為100%

          • 父div配置為表格單元格元素 (display: table-cell)

          • 父div配置居中屬性(vertical-align: middle),使子div上下居中

          • 子div通過margin配置左右居中(margin-left:auto; margin-right:auto

          例子

          <style>
           * {margin: 0; padding: 0; box-sizing: border-box;}
           .table {display: table; width: 100%;}
           .father {display: table-cell; vertical-align: middle;}
           .son {margin: auto;}
          </style>
          <body>
           <div class="table" >
           <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
           <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
           </div>
           </div>
          </body>

          注:

          • 表格單元格比較特殊,如果只有一個單元格時,它的寬度默認會占父級(table|tr)寬度的100%;

          • table默認寬度不會撐開,需要手動配置width:100%;

          方法二(line-height)

          理念

          當父div的行高等于自身高度時,內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。通過文本居中屬性text-align:center,可以使內部行內元素或行內塊元素左右居中顯示。

          步驟

          • 子div設定為行內塊元素(display:inline-block);

          • 父div設置行高(line-height)使子div上下居中

          • 父div設置文本居中(text-align:center)使子div左右居中。

          <style>
           * {margin: 0; padding: 0; box-sizing: border-box;}
           .father {line-height: 500px; text-align: center; font-size: 0;}
           .son { display: inline-block;
           /* display: inline-flex;
           display: inline-grid;
           display: inline-table; */
           }
          </style>
          <body>
           <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
           <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
           </div>
          </body>

          注: 行高如果設置為當前父div的高度(400px)的話,有固定高度的子div并不會居中顯示的,問題出在瀏覽器默認將其當做文本居中的,即把它當做了一段文本(chrome默認font-size:16px;hight:21px)進行居中,沒把它當做高度100px進行居中。所以需要對父div的line-height進行調整。以font-size:0(對應的字體高度為0)為例子,則需要line-height增加一個子div的高度(400px + 100px;)。

          方法三(定位

          理念

          利用定位屬性(top、left、right、bottom)百分比的模式。若為100%,則代表偏移的長度為父div的高度(寬度)的100%。

          步驟

          • 父div標記下定位(position:relative|absolute|fixed);子div絕對定位(position:absolute

          • 子div上下居中:top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;

          • 子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2

          例子

          <style>
           * {margin: 0; padding: 0; box-sizing: border-box;}
           .father {position: relative;}
           .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
           }
          </style>
          <body>
           <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
           <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
           </div>
          </body>

          方法四(定位)

          理念:

          定位屬性top和bottom(或是left和right)值分別設置為0,但子div有固定高度(寬度),并不能達到上下(左右)間距為0,此時給子div設置margin:auto會使它居中顯示。

          步驟:

          • 父div標記下定位(position:relative|absolute|fixed|sticky);子div絕對定位(position:absolute

          • 子div上下居中:top:0;bottom:0;margin-top:auto;margin-bottom:auto

          • 子div左右居中:left:0;right:0;margin-left:auto;margin-right:auto

          例子

          <style>
           * {margin: 0; padding: 0; box-sizing: border-box;}
           .father {position: relative;}
           .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
          </style>
          <body>
           <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
           <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
           </div>
          </body>

          方法五(flex)

          理念

          彈性盒子,自帶的一個居中功能

          例子

          <style>
           * {margin: 0; padding: 0; box-sizing: border-box;}
           .father {display: flex; align-items: center}
           .son {margin: auto}
          </style>
          <body>
           <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
           <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
           </div>
          </body>

          flex兼容性,以及存在的已知問題

          結尾

          方法二和方法三兼容性要比其它好些

          參考資料

          Can I use
          css-vertical-center-solution
          CSS實現垂直居中的5種方法--前端觀察

          網頁設計中經常用到css來設計各種邊框樣式以及顏色等,有時候需要一個div只顯示一個邊框,那么你可能會用到下面的一些方法。?

          一、CSS border-width 屬性

          border-width是實現顯示邊框的重要屬性。用法如下:

          border-width:top right bottom left

          參數說明:

          top:上邊框屬性,可以設置像素,也可以設置樣式,意思為上邊框的寬度。

          right:右邊框屬性,可以設置像素,也可以設置樣式,意思為上邊框的寬度。

          bottom:下邊框屬性,可以設置像素,也可以設置樣式,意思為上邊框的寬度。

          left:左邊框屬性,可以設置像素,也可以設置樣式,意思為上邊框的寬度。

          其中像素如:10px 20px等

          內置樣式有:

          thin:定義細的邊框;

          medium:默認值,定義中等邊框;

          thick:定義粗的邊框;

          inherit:繼承父元素的邊框寬度。

          二、CSS border-style 屬性

          border-style是用來設置邊框線樣式的,語法如下:

          border-style:樣式;

          其中可設置的樣式有:

          none 定義無邊框。

          hidden 與 "none" 相同。不過應用于表時除外,對于表,hidden 用于解決邊框沖突。

          dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。

          dashed 定義虛線。在大多數瀏覽器中呈現為實線。

          solid 定義實線。

          double 定義雙線。雙線的寬度等于 border-width 的值。

          groove 定義 3D 凹槽邊框。其效果取決于 border-color 的值。

          ridge 定義 3D 壟狀邊框。其效果取決于 border-color 的值。

          inset 定義 3D inset 邊框。其效果取決于 border-color 的值。

          outset 定義 3D outset 邊框。其效果取決于 border-color 的值。

          inherit 規定應該從父元素繼承邊框樣式。

          三、實例應用

          只要定義邊框不為0,即可顯示邊框(但是需要定義邊框線樣式),如果想要只顯示下邊框就相當于把top、right、left設置為0px;下邊框不為0即可。

          實例如下:

          <html>

          <head>

          <meta charset='utf-8'>

          <title>標題</title>

          </head>

          <body>

          <style>

          .show{ border-width: 0 0 1px 0; border-style: solid; border-color: black; }

          </style>

          <div class='show'>只顯示下邊框</div>

          </body>

          </html>

          顯示如下:

          如果想要只顯示右邊框只需要改border-width屬性為 0 1px 0 0即可。

          lt;!DOCTYPE HTML>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          <script type="text/javascript">

          function req(){

          var div = document.getElementById("div1");

          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離

          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離

          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動條滾動的距離

          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動條滾動的距離

          }

          </script>

          </head>

          <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">

          <div style="width:60%;border-right:1px dashed red;float:left;">

          <div style="float:left;">

          <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

          <div style="height:500px;width:400px">請調整橫豎滾動條后,點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

          </div>

          <input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>

          </div>

          </div>

          <div style="width:30%;float:left;">

          <ul style="list-style-type: none; line-height:30px;">結果:

          <li>offsetTop : <span id="li1"></span></li>

          <li>offsetLeft : <span id="li2"></span></li>

          <li> scrollTop : <span id="li3"></span></li>

          <li>scrollLeft : <span id="li4"></span></li>

          </ul>

          </div>

          <div style="clear:both;"></div>

          </body>

          </html>


          主站蜘蛛池模板: 国产一区二区三区无码免费| 中文字幕aⅴ人妻一区二区| 国产伦精品一区二区三区精品 | 国产精品一区二区久久精品| 亚洲一区二区三区免费观看| 精品少妇人妻AV一区二区三区| 日本一区二区三区免费高清| 亚洲视频在线一区二区| 无码乱人伦一区二区亚洲一| 国产日韩一区二区三区在线播放| 日本一区二区三区免费高清在线| 国产午夜精品一区二区三区嫩草 | 亚洲一区中文字幕在线电影网| 老熟妇高潮一区二区三区| 亚洲欧洲一区二区三区| 日韩精品无码一区二区中文字幕 | 日韩人妻无码一区二区三区| 中文激情在线一区二区| 亚洲日本一区二区一本一道| 精品国产一区AV天美传媒| 波多野结衣一区二区三区88| 在线观看亚洲一区二区| 国产激情一区二区三区 | 国产精品香蕉一区二区三区| 国产成人片视频一区二区| 精品无人区一区二区三区在线| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 日韩电影在线观看第一区| 国精产品一区一区三区| 国产乱人伦精品一区二区在线观看 | 亚洲一区二区女搞男| 大帝AV在线一区二区三区| 久久精品一区二区免费看| 国产成人高清亚洲一区91| 水蜜桃av无码一区二区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 性色AV一区二区三区无码| 免费日本一区二区| 秋霞电影网一区二区三区| 中文字幕日韩一区二区三区不卡| 久久亚洲中文字幕精品一区|