CSS居中完全指南_html/css_WEB-ITnose
原载于 CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。
人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中：
-
水平
-
需要居中 inline或者 inline-*元素（如文字或者链接）？
-
需要居中 block类的元素？
-
需要居中多个 block元素？
-
-
垂直
-
需要居中 inline或者 inline-*元素（如文字或者链接）？
-
需要居中 block类的元素？
-
-
既水平又垂直
-
固定宽高
-
不固定宽高
-
使用 flexbox
-
水平居中
水平居中 inline或者 inline-*元素
你可以轻松的在一个 block元素中水平居中一个 inline元素，以下代码对 inline， inline-block， inline-table和 inline-flex等有效
.parent { text-align: center;}水平居中 block类的元素
在 block元素被设定固定宽度的情况下，可以使用设置元素 margin-left和 margin-right的值为 auto的方法实现水平居中。
.child { width: 400px; margin: 0 auto;}水平居中多个 block类的元素
通过 inline-block实现
.parent { text-align: center;}.child { display: inline-block; text-align: left;}通过 flexbox实现
.parent { display: flex; justify-content: center;}垂直居中
垂直居中 inline或者 inline-*元素
单行
inline/text元素可以简单的用设置相同的上下 padding值达到垂直居中的目的。
.center { pading-top: 30px; padding-bottom: 30px;}如果因为某种原因不能使用 padding的方法，你还可以设置 line-height等于 height来达到目的。
.center { height: 100px; line-height: 100px; white-space: nowrap;}多行
相同的上下 padding也可以适用于此种情况，如果不能生效，你可以尝试将该元素的父元素的 dispaly设置为 table，同时该元素的 dispaly设置为 table-cell，然后设置 vertical-align。
.parent { display: table; width: 200px; height: 400px;}.child { display: table-cell; vertical-align: middle;}如果上述方法不能使用，你可以尝试使用 flexbox,一个单独的 flexbox子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。
.parent { display: flex; justify-content: center; flex-direction: column; height: 400px;}如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before撑开高度 ，文字垂直居中。
.parent { position: relative;}.parent::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;}.child { display: inline-block; vertical-align: middle;}垂直居中 block 类的元素
已知元素高度
.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}未知元素高度
.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}使用 flexbox
.parent { display: flex; flex-direction: column; justify-content: center;}既水平又垂直
固定宽高
.parent { position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;}不固定宽高
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}使用 flexbox
.parent { display: flex; justify-content: center; align-items: center;}
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
