Method: 1. Use the text-align attribute to set the text to be horizontally centered, the syntax "text-align:center"; 2. Use the line-height attribute to set the text to be vertically centered, the syntax "line-height: value"; 3. Use CSS3’s flex layout to center the text vertically.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
1. Use the text-align attribute to center the text horizontally.
The text-align attribute specifies the horizontal alignment of the text in the element. Set the text by using the center value. Centered.
text-align is a basic attribute that affects how lines of text in an element are aligned with each other. The values left, right, and center will cause the text in the element to be left-aligned, right-aligned, and centered respectively. If you want to center the text, just use center.
This attribute sets the centering of some inline objects (or similar elements) such as text and img tags.
This attribute has the following characteristics:
1) The center of text-align is applied to a container. It only targets the text in the container and the display in the container is inline or inline. -Block container, if the display of the container inside is block, the content of the container inside will not be centered.
2), text-align is downwardly transitive and will continue to be passed to child elements. If you set a div, the content in its child divs will also be centered.
nbsp;html>
<meta>
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
</style>
<div>css 水平居中了--文本文字</div>
Rendering:
2. Use the line-height attribute to center the text vertically
line-height property sets the distance between lines (line height). Negative values are not allowed.
This property affects the layout of the line box. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance.
nbsp;html>
<meta>
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
<div>css 垂直居中了--文本文字</div>
Rendering:
3. CSS3 flex layout makes the text vertically centered
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: #ccc;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>Effect:
Recommended learning: css video tutorial
The above is the detailed content of How to center text in css. For more information, please follow other related articles on the PHP Chinese website!
Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AMYes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
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
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SublimeText3 Chinese version
Chinese version, very easy to use
Notepad++7.3.1
Easy-to-use and free code editor
