div嵌套的div水平垂直居中

最新推荐文章于 2023-11-03 20:38:10 发布

mo-2016

最新推荐文章于 2023-11-03 20:38:10 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： div嵌套水平垂直居中

本文链接：https://blog.youkuaiyun.com/qq_40825627/article/details/88652866

前端专栏收录该内容

14 篇文章

订阅专栏

博客介绍了实现div嵌套水平垂直居中的方法，通过给出body代码和css代码，最终轻松达成嵌套的水平垂直居中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：
在这里插入图片描述
body代码：

	<div class="div-one">
        <div class="div-two"></div>
    </div>

css代码：

	.div-one{
            width: 300px;
            height: 300px;
            position: relative;
            border: 1px solid #ff871e;
        }
        .div-two{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: #ff871e;
        }

到这里轻松实现嵌套的水平垂直居中状态。