css 文本和div垂直居中方法匯總

https://blog.csdn.net/u014607184/article/details/51820508

https://blog.csdn.net/liuying1802028915/article/details/79408551

 

表格內文居中

#class td /*設置表格文字左右和上下居中對齊*/ 
{  
    vertical-align: middle;
    text-align: center;  

 

 

 

單行文本垂直居中

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

<!--html代碼-->
    <div id="div1">
        這是單行文本垂直居中
    </div>

/*css代碼*/
        #div1{
            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代碼-->
    <div id="div1">
            這是多行文本垂直居中，
            這是多行文本垂直居中，
            這是多行文本垂直居中，
            這是多行文本垂直居中。
    </div>

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

 

父級元素高度固定

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

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

/*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%;   
        }

 

子div垂直居中

1、根據子div具體大小設置偏移

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

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

/*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;

 

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代碼-->
    <div id="outer">
        <div id="middle">
            利用絕對定位實現子div大小不固定垂直居中
        </div>          
    </div>

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

 4、利用vertical-align

<!--html代碼-->
    <div id="outer">
        <div id="middle">
            利用vertical-align屬性實現子div大小不固定垂直居中
        </div>          
    </div>

/*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;
        }

 這種方法是將div轉變成table-cell顯示，然后通過vertical-align: middle;再設置其子元素垂直居中，這種方法和上面設置父級元素高度固定時多行文本居中的方法一樣，所以這種方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以參照上面的代碼，上面設置父級元素高度固定時多行文本居中的方法其實就是將最里面的div垂直居中。這里我就不重述了。

 

5、利用display: flex

<!--html代碼-->
    <div id="outer">
        <div id="middle">
            利用display: flex實現子div大小不固定垂直居中
        </div>          
    </div>

/*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;
        }

 

這種方法只需要在父級div中加上這三句話就行，但是在IE中兼容性不好，IE9及以下IE瀏覽器版本都不支持。