css 文本和div垂直居中方法汇总

Posted 2021-01-05 niuli1987

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

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

单行文本垂直居中

对于单行文本，我们只需要将文本行高(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浏览器版本都不支持。