页面div模块设置居中

最新推荐文章于 2025-06-06 22:51:36 发布

吧唧部

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量4.4k

点赞数 3

分类专栏： css 文章标签： Html CSS 样式

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用CSS实现元素居中的多种方法，包括利用Flex布局的display:flex, justify-content及align-items属性进行水平和垂直居中，以及通过vertical-align:middle实现垂直居中的常见技巧。适合前端开发者学习。

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

居中样式

因非专业前端，所以很多样式并不会设置。故此在网上查找的一些前端设置方式：
该例子可忽略div的之前的一些设置问题造成的无法居中：

具体方式如下：
指定div标签的css样式里面添加：
代码如下：

html页面：

  <div id="div_1">
		 <div id = "div_2" >
		 居中
		</div>
   </div>

css页面：

#div_2{
	display:flex;   
	flex-direction: column;  
	justify-content:space-around;  
	align-items:center;  
}

display:flex; 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction: column; 容器内项目的排列方向(默认横向排列)
justify-content:space-around; 项目在主轴上的对齐方式
align-items:center; 项目在交叉轴上如何对齐

垂直居中

通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。
1，不定宽度的行内元素：text-align：center；或HTML中直接 align=“center” 按钮中的文字同样可以 style=“text-align:center;width:100%;”
2，定宽块元素：margin：0 auto