CSS未知宽高的元素，水平垂直居中

最新推荐文章于 2024-04-03 04:37:24 发布

微光

最新推荐文章于 2024-04-03 04:37:24 发布

阅读量609

点赞数

分类专栏： css 文章标签： Css

本文链接：https://blog.csdn.net/Web_J/article/details/84592827

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

方法一：使用定位

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<style>
.parent{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
        <div class="child">hello world</div>
    </div>
</body>

方法二：使用弹性布局

思路：使用css3 flex布局
优点：简单快捷
缺点：兼容不好

<style>
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent .child{
    color:#fff;
}
</style>
<body>div> <div class="parent">
        <div class="child">hello world</div>
    </div>
</body>

微光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS未知宽高的元素，水平垂直居中

方法一：使用定位思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性&lt;style&gt;.parent{ position: relative; height:300px; ...
复制链接

扫一扫

专栏目录