CSS文字與div垂直居中方法範例分析

在樣式佈局中，我們常常碰到需要將元素置中。透過css實作元素的水平居中較為簡單：對文本，只需要對其父級元素設定text-align: center;，而對p等區塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如表格元素中的

、 、等，而像

、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要透過別的方法去實現元素的垂直居中，下面我總結了幾種了常用垂直居中方法。

單行文本垂直居中

對於單行文本，我們只需要將文本行高(line-height)和所在區域高度(height)設為一致即可：

<!--html代码-->
    <p id="p1">
        这是单行文本垂直居中   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            height: 100px;   
            margin: 50px auto;   
            border: 1px solid red;   
            line-height: 100px; /*设置line-height与父级元素的height相等*/   
            text-align: center; /*设置文本水平居中*/   
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/   
        }

#多行文字垂直居中

#多行文字垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。

父級元素高度不固定

父級高度不固定的時，高度只能透過內部文字來撐開。這樣，我們可以透過設定內填充（padding）的值來使文字看起來垂直居中，只需設定padding-top和padding-bottom的值相等：

<!--html代码-->
    <p id="p1">
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中。   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            margin: 50px auto;   
            border: 1px solid red;   
            text-align: center; /*设置文本水平居中*/   
            padding: 50px 20px;   
        }

#父級元素高度固定

#本文一開始就提到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，結合display: table;，可以使得p模擬table屬性。因此我們可以設定父級p的display屬性：display: table;；然後再增加一個p包含文字內容，設定其display:table-cell;和vertical-align:middle;。具體程式碼如下：

<!--html代码-->
    <p id="outer">
        <p id="middle">
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中。   
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;      
        }

#但是，在IE7中顯示效果如下：

這是因為IE7及以下的版本並不能很好的支援display:table和display:table-cell屬性，當然，如果你不考慮IE7以下的版本的瀏覽器，上述方法是可以實現垂直居中。如果把IE7及以下版本考慮進去，我們可以用到CSS hack的知識來設定針對不同瀏覽器的屬性。

<!--html代码-->
    <p id="outer">
        <p id="middle">
            <p id="content">
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)。   
            </p>
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
            *position:relative;  //兼容IE7及以下版本   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;   
            *position:absolute;   //兼容IE7及以下版本   
            *top:50%;     
        }   
        #content {     
           *position:relative;  //兼容IE7及以下版本    
           *top:-50%;     
        }

子p垂直居中

1、根據子p具體大小設定偏移

如果子p固定大小，設定水平和垂直偏移父元素的50%，再根據實際長度將子元素向上和向左挪回一半大小

<!--html代码-->
    <p id="outer">
        <p id="middle">
            子p(固定大小)垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
                background-color: #13CDF4;   
                width: 300px;   
                height: 200px;   
                position: relative;   
        }   
        #middle{    
                background-color: #E41627;   
                width: 100px;   
                height: 100px;   
                margin: auto;   
                position: absolute;   
                left: 50%;    
                top: 50%;   
                margin-left: -50px;   
                margin-top: -50px;   
        }

##該方法相容於IE7、IE6，但只針對子p大小的固定的情況下才有效。大部分時候，子p的大小是不固定的，下面介紹子p大小不固定時的方法。由於顯示效果與這個效果基本上一樣，效果圖就不一一貼出來，讀者可以自行複製程式碼驗證。

2、利用translate

針對第一種方法中水平和垂直偏移父元素的50%後，不設定margin值，而是利用除css3中的transform屬性設定translate的值，css程式碼部分改成如下：

#middle{    
        background-color: #E41627;   
        width: 100px;   
        height: 100px;   
        margin: auto;   
        position: absolute;   
        left: 50%;    
        top: 50%;   
        transform: translateX(-50%) translateY(-50%);   
        -webkit-transform: translateX(-50%) translateY(-50%);   
    }

這種方法需要注意transform是css3中的屬性，使用時注意瀏覽器的相容性，IE9之前的版本不支援。

3、利用絕對佈局absolute

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用绝对定位实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            position: relative;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   //子p大小可随意设置   
            height: 100px;   
            margin: auto;   
            position: absolute;   
            top: 0;left: 0;right: 0;bottom: 0;   
        }

該方法不相容IE7、IE6

4、利用vertical-align

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用vertical-align属性实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: table-cell;    
            vertical-align: middle;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
            margin: 0 auto;   
        }

这种方法是将p转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的p垂直居中。这里我就不重述了。

5、利用display: flex

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用display: flex实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: flex;   
            justify-content: center;/*实现水平居中*/   
            align-items:center; /*实现垂直居中*/   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
        }

这种方法只需要在父级p中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。

以上是CSS文字與div垂直居中方法範例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！