为定义宽高盒子的垂直水平居中的方法

最新推荐文章于 2022-08-09 18:34:28 发布

YangL666

最新推荐文章于 2022-08-09 18:34:28 发布

阅读量269

点赞数

分类专栏：个人日常分享知识点总结

本文链接：https://blog.csdn.net/YangL666/article/details/82502201

版权

知识点总结同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

个人日常分享

45 篇文章 0 订阅

订阅专栏

<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>
</head>
<style>

    /* 第一种用transform */
    .father{
        position: relative;
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 20px auto;
    }
    .son{
        position: absolute;
        left: 50%;
        top: 50%;
        color: red;
        transform: translate(-50%,-50%);
    }
第二种用flex
     .father{
        display: flex;
        /* 主轴居中对齐 */
        justify-content: center;
        /* 侧轴居中对齐 */
        align-items: center;
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 20px auto;
    }
    .son{
        color: red;
    }

第三种table-cell
     .father{
        display: table;
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 20px auto;
    }
    .son{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: red;
        font-size: 16px;
    }


</style>
<body>
    <div class="father">
        <div class="son">未知宽高元素垂直水平居中</div>
    </div>
</body>
</html>

YangL666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为定义宽高盒子的垂直水平居中的方法

&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="
复制链接

扫一扫