css实现垂直居中的几种常见方法

时间 2019-11-08

标签 css 实现垂直居中几种常见方法栏目 CSS 繁體版

原文原文链接

1.若是是单行文本。(子元素是块级元素，则设置子元素的line-height等于父元素的高，可以使子元素垂直居中与父元素)html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            width: 500px;
            height: 500px;
            background: gray;
        } 
        #wrapper p{
            line-height: 500px;//行高=父级的height，垂直居中。半行间距上下为250px
            text-align: center;//水平居中
        }
    </style>
</head>
<body>
<div id="wrapper">
    <p>这是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>

二、对于已知高度的块级子元素，子元素采用绝对定位，{position: absolute;top:50%; height: 300px; margin-top: -150px;}app

另外一种的绝对定位：子元素无论是块级，行内。未知高度的子元素，设置子元素{ position: absolute;top:50%;left:50%;width:100%;布局

transform:translate(-50%,-50%);text-align: center;}flex

translate:移动，transform的一个方法spa

经过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：code

用法transform: translate(50px, 100px);orm

适用：绝对定位为页面布局没有影响的状况下能够使用，而且子级的高度是已知的htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            position: relative;//父级
            width: 500px;
            height: 500px;
            background: gray;
        } 
        #wrapper p{
            position: absolute;//子级用绝对定位
            top:50%;//先定位到50%的位置
            height: 300px;//已知的高度
            margin-top: -150px;//往上提自己高度的一半
        }
    </style>
</head>
<body>
<div id="wrapper">
    <p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>

3、对于已知块级子级元素的高度，并且不能用绝对定位来布局的状况，（利用一个空的div让其width为100%，高度为父元素的50%。适用：对于绝对布局有影响，不能适用position:absolute的元素，能够用如下这种方法。思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
            overflow: hidden;
        }       
        #null{//利用一个空的div让其width为100%，高度父元素的50%
            width: 100%;
            height: 50%;
            background: yellow;
        }
        #content {
            height: 100px;
            margin: -50px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="null"></div>
    <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧中吧~</div>
</div>
</body>
</html>

5.在无论子元素是（行内，或者块级）子元素未知高度的状况下，父级元素使用页面布局

{display: table-cell;

vertical-align: middle;

text-align: center;

}

或者父级使用{

display：table；

}

子级使用

{text-align: center; display: table-cell; vertical-align: middle;}

又或者使用父级使用 flex布局

{display: flex;

justify-content:center;（全部的行做为一个总体，在主轴上的排列方式为居中）

align-items:Center;}当只有单行时，align-content失效，align-items设置为center，items彼此之间的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
           background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        } 
        #content {}
    </style>
</head>
<body>
<div id="wrapper">
    <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span>
</div>
</body>
</html>
或者父级使用：display: table;子级使用display: table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
           background: gray;
            width: 500px;
            height: 500px;
            display: table;
        } 
        #content {text-align: center;
            display: table-cell;
            vertical-align: middle;}
    </style>
</head>
<body>
<div id="wrapper">
    <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span>
</div>
</body>
</html>