How to set vertical centering in CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set vertical centering in CSS?

青灯夜游

Sep 08, 2018 pm 01:42 PM

When we develop the front-end page, in order to make the page beautiful, there will be places where the vertical centering effect is required. In this chapter, let us learn how to set vertical centering using CSS, and introduce in detail several methods of setting vertical centering of text and div boxes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recommended Manual: CSS Online Manual

How to set vertical centering in CSS?

1: How to set up css Center the text vertically

1. line-height Center the text vertically

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中了--文本文字</div>
	</body>
</html>

Rendering:

How to set vertical centering in CSS?

This will allow the text in the div to be centered horizontally and vertically

##2. CSS3 flex layout to center the text vertically
##

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			     /*设置为伸缩容器*/
			    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>

Rendering:

How to set vertical centering in CSS? ## Recommended related articles:

1.How to achieve the vertical centering effect of Div
2.div tag: implementation of horizontal centering and vertical centering (with code)
Related video recommendations:
1.CSS video tutorial-Jade Girl Heart Sutra Edition

2: How to set up div box with css Vertically center the container (block element)

##1. Use absolute positioning and negative margins to vertically center the block-level element

(already Knowing the height of the element) If we know the height of the element, we can achieve vertical centering like this:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 150px;
			    height: 100px;
			    background: orange;
			    position: absolute;
			    top: 50%;
			    margin: -50px 0 0 0;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中</div>
		</div>
	</body>
</html>

Rendering:

This method has good compatibility, but there is a small disadvantage: it must be done in advance Know the size of the block-level element being centered, otherwise vertical centering cannot be accurately achieved.

How to set vertical centering in CSS?

2. Use absolute positioning and transform

(unknown element height)

If we don’t know the height of the element, then we need to first move the element Position the center of the container, and then use the translate attribute of transform to coincide the center of the element with the center of the parent container to achieve vertical centering:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				background: #93BC49;
			    position: absolute;
			    top: 50%;
			    transform: translate(0, -50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
		</div>
	</body>
</html>

Rendering:

A very obvious benefit of this method is that you do not need to know the size of the centered element in advance, because the percentage of the translate offset in the transform is relative to the size of the element itself.

How to set vertical centering in CSS?

3. Absolute positioning combined with margin: auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中...</div>
		</div>
	</body>
</html>

Rendering:

This kind The method needs to first position the element to be vertically centered absolutely relative to the parent element, set top and bottom to equal values, no matter what value they are set to, as long as they are equal; then set the margin of the element to be centered to auto, so that Vertical centering can be achieved. The width and height of the centered element do not need to be set, but if not set, it must be an element such as a picture that contains its own size, otherwise it cannot be implemented.

How to set vertical centering in CSS?

4. Use padding to achieve vertical centering of child elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    background: #ddd;
			    padding: 100px 0;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了</div>
		</div>
	</body>
</html>

Rendering:

这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。

5. 使用flex布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			}
			.child{
				width: 300px;
			    height: 100px;
			    background: #08BC67;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了--弹性布局</div>
		</div>
	</body>
</html>

效果图：

How to set vertical centering in CSS?

关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
　　flex-start:：交叉轴的起点对齐；
　　flex-end：交叉轴的终点对齐；
　　center：交叉轴的中点对齐；
　　baseline：项目第一行文字的基线对齐；
　　stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。

The above is the detailed content of How to set vertical centering in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties