【CSS】让div在另一个div中垂直居中

最新推荐文章于 2024-01-12 14:02:32 发布

qing_小诺

最新推荐文章于 2024-01-12 14:02:32 发布

阅读量7.9k

点赞数 13

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33237207/article/details/100079729

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

垂直居中是布局中十分常见的效果之一，如果我们想实现下图的效果：

首先我们写两个div：（下面的介绍中，我们称外层div为 父div ，里面的div为 子div ）。

<body>
    <div class="content">
        <div>我是需要垂直居中的div</div>
    </div>
</body>

且给两个div添加最基本样式：

    .content {
        height: 200px;
        width: 500px;
        border: 1px solid blue;
    }
    .content>div {
        text-align: left;
        width: 200px;
        height: 50px;
        background: red;
    }

现在的效果如下：

下面来介绍一下如何实现垂直居中的：

方法1：用table-cell属性：

给父div添加下面的样式即可：

.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

方法2：用flex属性： [可改造成垂直水平居中]

给父div添加下面的样式即可：

.box {
    display: flex;
    /*定义子级元素垂直居中*/
    align-items: center;
    /* 定义子级元素水平居中 */
    /* justify-content: center; */
}

方法3：用绝对定位和负边距： [可改造成垂直水平居中]

此方法只针对子div元素高度固定的情况使用！

给父div设置 position: relative; 给子div添加下面的样式即可：

.inner {
    position: absolute;
    top: 50%;
    left: 0;
    /* 子div高度的一半 */
    margin-top: -25px;
}

方法4：用绝对定位和translate： [可改造成垂直水平居中]

给父div设置 position: relative; 给子div添加下面的样式即可：

.inner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

方法5：用:after来占位： [可改造成垂直水平居中]

给父div添加:after样式：

.box:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

然后给子div添加下面的样式即可：

.inner {
    display: inline-block;
    vertical-align: middle;
}

如果想要水平居中，给父div添加下面的样式：

.box{
    /* 子div左右居中  */
    text-align: center;
}

方法6：用flex属性和margin： [可改造成垂直水平居中]

给父div设置 display: flex; 给子div添加下面的样式即可：

.inner {
    /* 垂直居中 */
    margin: auto 0;
    /* 设置垂直水平居中 */
    /* margin: auto; */
}

除了上面几种稍微改造代码，就可以实现垂直水平都居中的，

下面再来介绍一种实现垂直水平都居中的方法：

方法：用绝对定位和0

给父div设置 position: relative; 给子div添加下面的样式即可：

.inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

附：启蒙链接：https://www.cnblogs.com/hutuzhu/p/4450850.html

qing_小诺

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
【CSS】让div在另一个div中垂直居中

垂直居中是布局中十分常见的效果之一，如果我们想实现下图的效果：首先我们写两个div：（下面的介绍中，我们称外层div为父div，里面的div为子div）。<body> <div class="content"> <div>我是需要垂直居中的div</div> </div></b...
复制链接

扫一扫