[前端知识点]元素水平垂直居中

最新推荐文章于 2023-12-19 09:24:34 发布

Coder_JC_Liu

最新推荐文章于 2023-12-19 09:24:34 发布

阅读量183

点赞数 1

分类专栏：前端知识点文章标签： css 面试定位 css3

本文链接：https://blog.csdn.net/Coder_JC_Liu/article/details/113881047

版权

前端知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[前端知识点]元素水平垂直居中

前言

前言

前端面试常考，通过css实现父元素中子元素水平垂直居中
接下来介绍九种布局方式

初始html模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex实现元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
           
        }
        #wrap .box {
        }
    </style>
</head>
<body>

<div id="wrap" style="width: 500px;height: 500px;background: gray">
    <div class="box" style="width: 200px;height: 200px;background: pink;"></div>
</div>

</body>
</html>

初始效果如下
垂直水平居中
期望实现以下效果
子元素水平垂直居中

一、子元素相对于父元素绝对定位(偏移量都为0)，子元素设置margin:auto

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

二、子元素相对于父元素绝对定位，并配合使用负值的 margin

最常见的方法，这种方法只能在子元素宽高已知的情况下使用。

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

三、子元素相对父元素绝对定位，并使用 calc() 计算属性

与上一方法相同，只是用计算属性替代了偏移量和 margin

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

四、子元素相对父元素绝对定位，并使用 transform 属性

与二、三方法相似，不过使用 translate 对子元素的宽高没有要求，在未知宽高的情况下依然适用。

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

五、父元素flex; 子元素 margin:auto;

最简单的方式，子元素宽高已知未知的情况都适用。

#wrap {
    display: flex;
}
#wrap .box {
    margin: auto;
}

flex其他方式可参考flex教程

六、父元素通过flex设置内容的水平和垂直居中（新版本）

可能存在兼容问题

#wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrap .box {
}

七、父元素通过flex设置内容的水平和垂直居中（老版本）

#wrap {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
#wrap .box {
}

八、父元素table-cell 和 vertical-align：middle; 子元素margin: auto

低版本IE会有问题

#wrap {
    display: table-cell;
    vertical-align: middle;
}
#wrap .box {
    margin: auto;
}

九、父元素table-cell 及内容的水平和垂直居中，子元素设置为行内块

低版本IE会有问题

#wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#wrap .box {
    display: inline-block;
}

如果还有其他推荐布局，欢迎大家私信或评论区分享

Coder_JC_Liu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[前端知识点]元素水平垂直居中

[前端知识点]元素水平垂直居中前言一、子元素相对于父元素绝对定位(偏移量都为0)，子元素设置margin:auto二、子元素相对于父元素绝对定位，并配合使用负值的 margin三、子元素相对父元素绝对定位，并使用 calc() 计算属性四、子元素相对父元素绝对定位，并使用 transform 属性五、父元素flex; 子元素 margin:auto;六、父元素通过flex设置内容的水平和垂直居中（新版本）七、父元素通过flex设置内容的水平和垂直居中（老版本）八、父元素table-cell 和 vertic
复制链接

扫一扫