HTML/CSS常见的几种垂直居中方式

2019-11-02 20:18:35

一丶什么是垂直居中

　　指当前标签在父级容器中垂直方向是居中显示的

　　实现垂直居中的几种方式：

　　　　1.table-cell+vertical-align 属性配合使用

　　　　2.absolute+transform 属性配合使用

　　　　3.display+align-items 属性配个使用

　　　　4.position+margin 属性配合使用

二丶代码

　　1.第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            height: 600px;
            width: 200px;
            display: table-cell;
            vertical-align: middle;
            background: chocolate;
        }
        .child{
            width: 200px;
            height: 200px;
            background: darkblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

　　　　效果：

　　vertical-align:属性时用来设置文本内容垂直方向的对齐方式

　　　　这里常用属性值：top　　顶部对齐

　　　　　　　　　　　　middle 居中对齐

　　　　　　　　　　　　bottom 底部对齐

　　这里为什么会对div有效果，就完全是因为display属性的table-cell属性值，这时父级标签将会表示成为一个表格的单元格，在table中单元格是可以将内容垂直居中的，因为单元格有两种对齐方式，一种是水平方向的，一种是垂直方向的。

　　这种方式的优点与缺点

　　　　优点：浏览器兼容性好，支持老版本的浏览器，这两个属性在CSS2中也是支持的而老版本的浏览器对CSS2的支持非常好

　　　　缺点：vertical-align属性具有继承性，这将会导致父级标签内的所有文本都是垂直居中的

　　2.第二种方式

　　　　代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            background: cornflowerblue;
            height: 600px;
            width: 200px;
            position:relative;
        }
        .child{
            width: 200px;
            height: 200px;
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            background: crimson;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

　　效果：

　　　　这里的定位并没有多于，这里是让子级标签在父级标签居中的，父级标签不开启定位将会以页面进行定位，如果开启了将会以父级标签进行定位，所以这里需要开启父级标签的定位。

　　　　这种方式的优缺点

　　　　　　优点：父级标签不管是否脱离文档流，不会影响子级标签垂直居中的效果

　　　　　　缺点：transform属性是CSS3中的新属性，浏览器支持不好，在个别老版本的浏览器中不适用

　　3.第三种

　　　　代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            background: darkcyan;
            height: 600px;
            width: 200px;
            display: flex;
            align-items: center;
        }
        .child{
            background: darkred;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

　　　　效果：

　　　　　　这里布局使用的flex布局（弹性布局）任何一个容器都可以指定为flex布局，在flex布局中它的子级标签都将会成为flex item，这个好像有点老了

　　4.第四种

　　　　代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            background: cornflowerblue;
            width: 200px;
            height: 600px;
            position: relative;
        }
        .child{
            background: crimson;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

　　　　效果：

垂直居中不只是只有这几种方法，还有很多的，这里不全部写了

下篇水平垂直居中

HTML/CSS常见的几种垂直居中方式

猜你喜欢