如何实现垂直水平居中_html视频垂直居中代码-CSDN博客

本文链接：https://blog.csdn.net/qq_64634797/article/details/124803172
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 10px;
            font-size: 16px;
        }
        /* 方法一： table表格法*/
        /* 思路：显示设置父元素为：table，子元素为：cell-table，vertical-align: center
        优点：父元素（parent）可以动态的改变高度（table元素的特性）
        缺点：IE8以下不支持*/
        .parent1{ 
            display: table;
            height:300px;
            width: 300px;
            background-color: red;
        }
        .parent1 .child{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }

        /* 方法二：空元素法 */
        /* 思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
        缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。当然也可以使用伪元素来代替span标签，不过IE支持也不好 */
        .parent2{
            height:300px;
            width: 300px;
            text-align: center;
            background: red;
        }
        .parent2 span{
            display: inline-block;;
            width: 0;
            height: 100%;
            vertical-align: middle;
            zoom: 1;/*BFC*/
            *display: inline;
        }
        .parent2 .child{
            display: inline-block;
            color: #fff;
            zoom: 1;/*BFC*/
            *display: inline;
        }
        /* 方法三：-50%法 */
        /* 注意事项：1、子绝夫相 2、子上50%，左50% 3、子平移自身高宽各一半 */
        .parent3{
            position: relative;
            height:300px;
            width: 300px;
            background: red;
        }
         .parent3 .child{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #fff;
            /*translate属性中的百分比指的是自身的*/
            transform: translate(-50%,-50%); 
            /* transform: translate(-51.01px,-10.5px); */   
        }
        /* 方法四：弹性布局flex */
        /* 优点：简单 快捷
           缺点：低端pc浏览器和低版本的安卓设备不支持，不过现在应该很少有这种情况了*/
        .parent4{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height:300px;
            background: red;
        }
        .parent4 .child{
            color:#fff;
        }
        /* 方法五：绝对定位法 */
        /* 思路：父元素使用定位（相对/绝对都行），子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
        优点：兼容性好，父元素宽高可变，使用非常灵活，在做全屏居中的时候很好
        缺点：子元素还是要指定宽高，可以用百分比 */
        .parent5{
        position:absolute;
        width: 300px;
        height:300px;
        background: red;
        }
       .parent5 .child{
        color:#fff;
        margin: auto;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        text-align:center;
        width:50%;
        height:20%;
        }
        </style>
</head>
<body>
    <!-- 方法一 -->
    <div class="parent1">
        <div class="child">方法一</div>
    </div>
    <!-- 方法二 -->
    <div class="parent2">
        <span></span>
        <div class="child">方法二</div>
    </div>
    <!-- 方法三 -->
    <div class="parent3">
        <div class="child">方法三</div>
    </div>
    <!-- 方法四 -->
    <div class="parent4">
        <div class="child">方法四</div>
    </div>
    <!-- 方法五-->
    <div class="parent5">
        <div class="child">方法五</div>
    </div>
</body>
</html>