碼上快樂

相關內容    簡體    繁體

CSS：水平居中與垂直居中

本文轉載自   查看原文   2015-04-23 12:59   13560    CSS
CSS居中算是一個比較基礎的問題，在實際運用中，需要考慮到的一般是兩種情況，一種是主要是表現為文字，圖片等行內元素的居中，一種是指 div 等塊級標簽元素的居中。

水平居中

1、行內元素
行內元素（主要是表現為文字，圖片等行內元素），通過在父級元素設置 text-align:center 使子級行內元素居中。
 
2、定寬塊級元素
為定寬塊級元素設置： 
1 margin-left:auto;
2 margin-right:auto;
 
3、不定寬塊級元素
 不定寬塊級元素居中有三種方法：
  1. 加入 table 標簽
  2. 設置 display:inline 方法
  3. 設置 position:relative 和 left:50%
方法一：
將元素用 table 標簽包裹起來，包括 tbody、tr、td，但這種方法為了居中增加了無語義的標簽。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
 1 <div>
 2   <table>
 3     <tbody>
 4       <tr>
 5         <td>
 6            <ul>
 7               <li><a href="#">我是要</a></li>
 8               <li><a href="#">居中的</a></li>
 9               <li><a href="#">ul標簽</a></li>
10            </ul>
11         </td>
12       </tr>
13     </tbody>
14   </table>
15 </div>
CSS： 
1 table{
2     margin:0 auto;
3 }
4 ul{list-style:none;margin:0;padding:0;}
5 li{float:left;margin-right:8px;}
現代瀏覽器表現正常：
IE7有時候會出現問題：
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
方法二：
設置為 inline 行內元素后沿用行內元素居中的方法，這種方法改變了元素的 display 樣式。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div>
2     <ul>
3        <li><a href="#">我是要</a></li>
4        <li><a href="#">居中的</a></li>
5        <li><a href="#">ul標簽</a></li>
6   </ul>
7 </div>
CSS： 
1 div{
2   text-align:center;
3 }
4 ul{list-style:none;margin:0;padding:0;display:inline;}
5 li{margin-right:8px;display:inline;}
各瀏覽器表現正常居中，IE7也沒有出現什么問題。
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
方法三：
通過給父元素設置 float/display:inline-block（IE7對塊級元素設置 inline-block 支持性不好，需要 hack，即 *display:inline;*zoom:1;），然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div>
2     <ul>
3        <li><a href="#">我是要</a></li>
4        <li><a href="#">居中的</a></li>
5        <li><a href="#">ul標簽</a></li>
6     </ul>
7 </div>
CSS： 
 1 div{
 2     display: inline-block;
 3     /*兼容IE6，IE7*/
 4     *display: inline;
 5     *zoom:1;
 6     position:relative;
 7     left:50%
 8 }
 9 ul{
10     /*兼容IE6*/
11     _display: inline;
12     _zoom:1;
13     list-style:none;
14     margin:0;
15     padding:0; 
16     position:relative;
17     left:-50%;
18 }
19 li{
20     float:left;
21     margin-right:8px;
22 }
chrome，Firefox，opera，IE6+都可以表現正常。
注：
1、_display:inline 其實是觸發IE6中塊級元素表現出 inline-block 的效果，_zoom:1 觸發IE6中 hasLayout 效果，這里其他瀏覽器不需要觸發 inline-block 效果，原因不是很清楚；
2、其中display：inline-block 也可以替換為 float ，float的主要作用就是產生 inline-block 的效果，這樣代碼會更加簡潔一些，不用考慮太多的兼容問題：
CSS： 
 1 div{
 2     float: left;
 3     position:relative;
 4     left:50%
 5 }
 6 ul{
 7     /*兼容IE6*/
 8     _float:left;
 9     list-style:none;
10     margin:0;
11     padding:0; 
12     position:relative;
13     left:-50%;
14 }
15 li{
16     float:left;
17     margin-right:8px;
18 }
---------------------------------------------------------吃完栗子---------------------------------------------------------
垂直居中
垂直居中主要是行內元素的居中比較麻煩，特別是多行文本的居中。
1、父元素高度確定的行內元素（單行文本），
通過設置父元素的 height 和 line-height 高度一致來實現的。
 
2、高度固定的 塊級元素垂直居中
高度固定的 塊級元素垂直居中有三種方法：
  1. 垂直居中元素設置 absolute，利用 absolute 元素居中的方法來居中；
  2. 垂直居中元素設置 absolute，通過 top 和 margin-top 屬性來調整；
  3. 創建浮動元素；
方法一：
其實這個方法是 absolute 元素居中的方法，父元素設置 position:relative，垂直居中元素設置 position:absolute，當要垂直居中時，設置 top:0;bottom:0，然后為上下 margin 設置 auto，水平居中也是同理。IE6，IE7不支持此種居中方法。
這種方法適用於原本就設置了 position 為 absolute 的元素。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div class="wrap">
2   <div class="container">
3      <p>我是想要垂直居中的塊級元素。</p>
4   </div>
5 </div>
CSS： 
 1 .wrap{
 2     width:200px;
 3     height: 200px;
 4     background:#ccc;
 5     position: relative;
 6 }
 7 .container{
 8     width: 100px;
 9     height:100px;
10     background: #00ff00;
11     position:absolute; 
12     right: 0;
13     left:0;
14     top:0; 
15     bottom:0; 
16     margin:auto; 
17 }
chrome，Firefox，opera，IE8+表現如下，水平垂直居中：
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
方法二：
父元素設置 position:relative，需要垂直居中的元素設置： 
1 position:absolute;
2 top:50%;
3 height:2Hpx;
4 margin-top:-Hpx;
這里 top改為 bottom，margin-top 改為 margin-bottom 效果一樣，這種方法適用於原本設置了 position 為 absolute 的元素。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div class="wrap">
2   <div class="container">
3      <p>我是想要垂直居中的塊級元素。</p>
4   </div>
5 </div>
CSS： 
 1 .wrap{
 2   width:100px;
 3   height: 200px;
 4   background:#ccc;
 5   position: relative;
 6 }
 7 .container{
 8     position:absolute; 
 9     top:50%; 
10     height:100px; 
11     margin-top:-50px; /* 高度的一半 */ 
12     background: #00ff00;
13 }
chrome，Firefox，opera，IE6+都能夠居中：
IE6 由於 3px bug表現稍微不同，不過由於這里主要討論垂直居中，所以就不對其作過多留意。
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
 
方法三：
在需要垂直居中的元素前創建浮動元素，浮動元素設置 margin-bottom 為垂直居中元素高度的一半，高度為父元素高度的一半，為了兼容IE6、IE7，還需要象征性地設置一下 width。垂直居中元素 清除浮動。但是這個方法創建了無語義的標簽，還要做一些兼容性的處理。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div class="wrap">
2     <div class="floatdiv"></div>  
3     <div class="container">
4         <p>我是想要垂直居中的塊級元素。</p>
5     </div>
6 </div>
CSS： 
 1 .wrap{
 2     width: 100px;
 3     height: 200px;
 4     background: #ccc;
 5 }
 6 .floatdiv {
 7     *width: 1px;/*兼容IE6、IE7*/
 8     float:left; 
 9     height:50%; 
10     margin-bottom:-50px;
11 }
12 .container {
13     clear:both; 
14     height:100px; 
15     position:relative;
16     background: #00ff00;
17 }
chrome，Firefox，opera，IE6+都能夠居中：
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
3、父元素高度確定的 行內元素（ 多行文本、圖片）、塊狀元素
父元素高度確定的 行內元素（ 多行文本、圖片）、塊狀元素垂直居中有兩種方法 ：
  1. 加入table標簽；
  2. 設置 display 為 table-cell，激活 vertical-align 屬性。
 
方法一：
使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
 1 <table>
 2   <tbody>
 3     <tr>
 4       <td class="wrap">
 5         <div>
 6           <p>我是想要垂直居中的一段文字。</p>
 7         </div>
 8       </td>
 9     </tr>
10   </tbody>
11 </table>
CSS： 
1 .wrap{
2    width:100px;
3    height:200px;
4    background:#ccc
5 }
chrome，Firefox，opera，IE6+表現如下：
注：
1、因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了；
2、將 div 換為 img 效果一致。
---------------------------------------------------------吃完栗子---------------------------------------------------------
 
方法二：
在 chrome、Firefox 、opera、IE8 及以上的瀏覽器下可以設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式。
 
---------------------------------------------------------舉個栗子---------------------------------------------------------
HTML： 
1 <div>
2   <p>我是想要垂直居中的一段文字。</p>
3 </div>
CSS： 
1 div{
2   width:100px;
3   height:200px;
4   background:#ccc;
5   display:table-cell;
6   vertical-align:middle;
7 }
chrome、Firefox 、opera、IE8 及以上的瀏覽器表現正常，IE6 和 IE7 則無法居中。
---------------------------------------------------------吃完栗子---------------------------------------------------------
垂直居中的方法比較多，至於用哪種方法還是要具體看情況，而且我相信還有更多的方法，歡迎大家補充。
 


本文來源：JuFoFu

本文地址：http://www.cnblogs.com/JuFoFu/p/5140302.html

 

 水平有限，錯誤歡迎指正。原創博文，轉載請注明出處。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS 水平居中，垂直居中 CSS 水平居中與垂直居中 主流 CSS 布局(水平居中、垂直居中、居中 ) css圖片居中(水平居中和垂直居中) css_css 盒子水平居中 垂直居中 -水平居中、垂直居中、水平垂直居中 css樣式水平居中和垂直居中的方法 css元素水平居中和垂直居中的方式 CSS-元素水平居中、垂直居中、水平垂直居中解決方案 [css]實現垂直居中水平居中的幾種方式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM