What methods are there to achieve vertical centering in css?
The method to achieve vertical centering in css is as follows:
1. Use line-height to achieve centering. This method is suitable for pure text;
<!-- css -->
<style>
.parents {
height: 400px;
line-height: 400px;
width: 400px;
border: 1px solid red;
text-align: center;
}
.child {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>Effect:
(Recommended tutorial: CSS tutorial)
2. By setting the relative positioning of the parent container, the child Absolute positioning is set at the level, and the label is adaptively centered through margin;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: blue;
/* 四个方向设置为0, 然后通过margin为auto自适应居中 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body> Effect:
3. Flexible layout flex parent setting display: flex; Set the margin of the child to auto to achieve adaptive centering;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>Effect:
4. The parent sets relative positioning and the child sets absolute positioning. , and achieved through displacement transform;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>Effect:
5. The parent sets the elastic box and sets the related properties of the elastic box;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
justify-content: center; /* 水平 */
align-items: center; /* 垂直 */
}
.child {
width: 200px;
height: 100px;
color: black;
background-color: orange;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child"></span>
</div>
</body> Effect:
6. Grid layout, the parent is converted into table form, and then the child is implemented by setting inline or inline blocks. (It should be noted that the prerequisite for the use of vertical-align: middle is inline elements and elements with a display value of table-cell).
Effect:
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
width: 200px;
height: 100px;
color: #fff;
background-color: blue;
display: inline-block; /* 子元素设置行内或行内块 */
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child"></span>
</div>
</body>Related video tutorial recommendation: css video tutorial
The above is the detailed content of What methods are there to achieve vertical centering in css?. For more information, please follow other related articles on the PHP Chinese website!
'CSS4' UpdateApr 11, 2025 pm 12:05 PMSince I first chimed in on the CSS4¹ thing, there's been tons of more discussion on it. I'm going to round up my favorite thoughts from others here. There is
The Three Types of CodeApr 11, 2025 pm 12:02 PMEvery time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to
HTTPS is Easy!Apr 11, 2025 am 11:51 AMI've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL certificates from third-party vendors and had trouble
HTML Data Attributes GuideApr 11, 2025 am 11:50 AMEverything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
Understanding Immutability in JavaScriptApr 11, 2025 am 11:47 AMIf you haven’t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment.
Custom Styling Form Inputs With Modern CSS FeaturesApr 11, 2025 am 11:45 AMIt’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a
Footnote CharactersApr 11, 2025 am 11:34 AMThere are special superset number characters that are sometimes perfect for footnotes. Here they are:
How to Create an Animated Countdown Timer With HTML, CSS and JavaScriptApr 11, 2025 am 11:29 AMHave you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot 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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Chinese version
Chinese version, very easy to use
