让一个div在网页始终保持上下左右居中

最新推荐文章于 2024-10-29 16:17:45 发布

即将拥有人鱼线的amos

最新推荐文章于 2024-10-29 16:17:45 发布

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/Xinzhao7230/article/details/103205421

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在网页设计中使div元素始终保持上下左右居中的三种方法：使用绝对定位配合margin:auto，使用百分比宽度和高度，以及利用弹性盒子（flexbox）特性。每种方法都提供了具体的CSS代码示例，帮助开发者根据不同场景选择合适的布局方案。

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

让一个div在网页中始终保持上下左右居中的方法

1、div的宽高不随视窗改变而改变的写法：

第一步：创建一个div；
第二步：给div添加样式，如下：
.box{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
}
或者是这样：
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background-color: red;
}

2、div宽高随视窗变化而变化的写法：

第一步：创建一个div；
第二步：给div添加样式，如下：（只需要把宽高改成百分比写法就好）
.box{
width: 20%;
height: 20%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
}

3、弹性盒子写法

ps：这种写法只能用一个div来包裹要居中的div，规定父级div的样式，从而达到子div上下左右保持居中的效果。
第一步：创建两个div，如下：

第二步：分别给两个div添加样式，如下：

.box{ //父级div样式
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}

.subBox{  //子div样式
    width: 100px;
    height: 100px;
    background-color: yellow;
}

这样就能保证子div在父级div中保持上下左右居中

/*
author:Amos
date：2019/11/22 18:50
*/