如何用CSS垂直和水平居中
要让一个 div 水平和垂直居中，1. 使用 Flexbox：父容器设置 display: flex，justify-content 和 align-items 为 center；2. 使用 Grid：父容器设置 display: grid，place-items 为 center；3. 绝对定位加 transform：子元素设为 absolute，top 和 left 为 50%，再 translate -50%；需要注意的是 margin: 0 auto 只能实现水平居中。
想让一个 div 在页面中水平和垂直居中，是前端布局中的常见需求。其实现方式有好几种，但不同场景下适用的方法略有不同。下面介绍几种实用又容易理解的方式。
使用 Flexbox 快速实现
Flexbox 是现代网页布局中最常用也最方便的工具之一。只需要在父容器上设置几个属性，就可以轻松实现居中。
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}这样，.parent 中的子元素（比如你的 div）就会自动居中了。
这个方法适用于大多数现代浏览器，兼容性也不错。如果你的项目不需要支持太老的浏览器版本，这应该是首选方案。
小提示：如果只想对某个特定的
div居中，可以临时把它的父级设为flex，不需要全局改动。
使用 Grid 布局也很简单
CSS Grid 同样提供了简洁的方式来实现居中效果，适合你已经在使用 Grid 的情况。
.parent {
display: grid;
place-items: center;
}这段代码相当于同时设置了垂直和水平方向的居中。
Grid 的写法比 Flex 更加简洁，但如果你只是做简单的居中，可能没必要为了这一点功能切换整个布局体系。
- 优点：语法更直观。
- 缺点：对于只做居中这种小事来说有点“大材小用”。
经典方法：绝对定位 transform
如果你的 div 是脱离文档流的绝对定位元素，或者父容器不能设置 flex 或 grid，可以用下面这种方法：
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}这种方式适用于弹窗、浮动层等场景。
它不依赖父容器的显示模式，所以灵活性更高，但也意味着你需要手动处理定位上下文，比如确保父级是 position: relative。
不要忘了 margin: 0 auto 只能水平居中
新手常犯的一个错误是以为 margin: 0 auto 能垂直居中。其实它只能控制水平方向的居中，而且需要配合宽度才能生效。
.child {
width: 200px;
margin: 0 auto;
}如果你只是想让块级元素在水平方向居中，那没问题；但如果是想同时垂直居中，那就得换其他方法了。
基本上就这些常见的做法。根据具体情况选一种最合适的就行。Flex 和 Grid 最方便，传统定位方法更灵活，看你怎么用了。
以上是如何用CSS垂直和水平居中的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undress AI Tool
免费脱衣服图片
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Stock Market GPT
人工智能驱动投资研究，做出更明智的决策
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在HTML中使用DEL和INS标签
Aug 12, 2025 am 11:38 AM
Thetagisusedtomarkdeletedtext,optionallywithdatetimeandciteattributestospecifywhenandwhythedeletionoccurred.2.Thetagindicatesinsertedcontent,alsosupportingdatetimeandciteforcontextabouttheaddition.3.Thesetagscanbecombinedtoshowdocumentrevisionsclearl
如何将CSS梯度用于背景
Aug 17, 2025 am 08:39 AM
CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo
如何在HTML中创建下标和上标
Aug 20, 2025 am 11:37 AM
TocreatesubscriptandsuperscripttextinHTML,usetheandtags.1.Usetoformatsubscripttext,suchasinchemicalformulaslikeH₂O.2.Usetoformatsuperscripttext,suchasinexponentslike10²orordinalslike1ˢᵗ.3.Combinebothtagswhenneeded,asinscientificnotationlike²³⁵₉₂U.The
如何使用CSS创建响应性的推荐滑块
Aug 12, 2025 am 09:42 AM
使用纯CSS创建响应式自动轮播的推荐语滑块是可行的，只需结合HTML结构、Flexbox布局和CSS动画。2.首先构建包含多个推荐语项的语义化HTML容器，每个.item包含引用内容和作者信息。3.通过设置父容器display:flex、width:300%（三张幻灯片）并应用overflow:hidden实现横向排列。4.利用@keyframes定义从0%到-100%的translateX变换，配合animation:scroll15slinearinfinite实现无缝自动滚动。5.添加媒体
如何在HTML中创建选择下拉
Aug 16, 2025 am 05:32 AM
使用和创建下拉菜单；2.用和name属性添加标签和名称；3.用selected属性设置默认选项；4.用对选项分组；5.添加required属性实现必填验证；完整的HTML下拉菜单应包含标签、名称、选项分组和验证，以确保功能完整且用户友好。
如何在HTML中使用地址标签
Aug 15, 2025 am 06:24 AM
thetagisusedtodefinecontactinformationFortheAuthororWoctOctorsection; 1.使用useItItforemail，holyshysaddress，phonenumber，orwebsiteurlwithinanarticleby;
如何使用CSS：焦点伪级
Aug 22, 2025 am 11:00 AM
使用:focus伪类为获得焦点的元素添加样式，提升可访问性和用户体验；2.基本语法为selector:focus设置焦点状态样式，常用于表单、链接及带tabindex的元素；3.不应移除默认焦点轮廓，应通过自定义outline和高对比度颜色确保可见性；4.可为自定义按钮等元素添加tabindex并应用:focus样式；5.可结合:hover、:invalid、:focus-within等伪类实现复杂交互；6.推荐使用:focus-visible实现仅键盘导航时显示焦点样式，提升用户体验；7.始终
如何在Bootstrap中创建可过滤画廊
Aug 22, 2025 am 11:42 AM
创建一个可过滤的画廊需要设置HTML结构、添加JavaScript过滤逻辑、可选增强动画效果、确保响应式设计，1.使用带有data-filter属性的按钮和带data-category属性的画廊项目构建HTML；2.通过JavaScript监听按钮点击事件，切换按钮状态并根据data-filter值控制项目显示或隐藏；3.可通过CSS过渡或jQuery的fadeIn/fadeOut实现平滑动画；4.利用Bootstrap网格系统自动实现响应式布局，最终实现一个无需插件、基于Bootstrap的响
