Article Directory
In work, we often encounter vertical centering. Here I summarize the vertical centering that I often use.
1、line-height
Only for labels with a single line of text and a known height, all styles are cleared first* (maigin:0; padding: 0))
HTML template code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<article class="SingleLine">
<p>我是单行文本</p>
</article>
</body>
</html>
CSS style code:
.SingleLine{
height: 300px;
border: 1px solid red;
line-height: 300px;
}
2. A combination of line-height and vertical-align: middle
The premise of this use is that the child element must be converted to an inline block element, and after the parent element sets the line-height, the child element must set the line-height to the default or set it according to the actual situation but cannot not set it. If it is not set, it will inherit The line-height of the parent element so that if there are child elements in the child element, the style will be problematic. Why set vertical-align: middle? Because the default element of the browser is placed on the baseline of the parent element.
HTML template: (we first set the line-height of the parent element)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.SingleLine{
height: 100px;
border: 1px solid red;
line-height: 100px;
}
</style>
</head>
<body>
<article class="SingleLine">
<div class="content">
<p>我是第一行</p>
<P>我是第二行</P>
</div>
</article>
</body>
</html>
CSS style:
.content {
background-color: red;
width: 300px;
line-height: normal;
display: inline-block;
vertical-align: middle;
}`
Setting width: 300px here is just to let everyone better see that if line-height: normal is not set, the content of the child element will exceed the parent element.
The effect is as follows:
From the above figure, it can be seen that if there are multiple lines of child elements in the child element, then the child element needs to set the line-height. If it is not set, it will inherit the line-height of the parent element and cause problems with the page style.
Why is it converted to inline-block here? Because vertical-align only works on inline block elements and inline elements,
So what is the function of setting vertical-align? Its function is to set the vertical alignment of elements. The default is that the element is placed on the baseline of the parent element, so we need to set vertical-align: middle here to place this element in the middle of the parent element because of centering.
3. Realized by Position + transform
Vertical centering through position + transform is divided into the following two situations: 1. position: absolute can be used when the height of the parent element is not known 2. position: relative can be used when the height of the parent element is known
Let us introduce in detail:
1. You can use position: absolute when you don't know the height of the parent element
HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<article class="article">
<div class="content">
<p>我是第一行</p>
<P>我是第二行</P>
</div>
<div>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
<p>我是填充内容的</p>
</div>
</article>
</body>
</html>
A div is added below here to prop up the height of the parent element, because the parent element has to be simulated and the height is uncertain. Since we want to use position: absolute, we have to add position: relative to the parent element
CSS样式:
.article{
position: relative;
border: 1px solid red;
}
.content {
background-color: red;
width: 300px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Here first use absolute positioning and then set the top value 50%. This will make the upper boundary of the child element be in the middle of the parent element, so if the child element is entirely in the middle of the parent element, the child element can be translated up by half of its height.
2. You can use position: relative when you know the height of the parent element
If you know the height of the parent element, then we can directly set the position:relative attribute to the child element: The specific CSS is as follows:
.article{
height: 500px;
border: 1px solid red;
}
.content {
background-color: red;
width: 300px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here the relative positioning of the child element is set, and then top:50% is set, which will cause the upper boundary of the child element to be located in the middle of the parent element, so if the child element is located in the middle of the parent element, the child element can be translated up by half of its height.
4. The combination of display: table and vertical-align: middle is realized
The principle of this is similar to the second type. The table-cell sets the elements to inline block-level elements, so you can use vertical-align: middle to center it.
HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<article class="article">
<div class="content">
<p>我是第一行</p>
<P>我是第二行</P>
</div>
</article>
</body>
</html>
CSS style:
.article{
display: table;
height: 300px;
border: 1px solid red;
}
.content {
display: table-cell;
width: 300px;
vertical-align: middle;
}
5. flex (flexible layout)
To use flexible layout, you need to first set the display of the parent element to flex, and then flex provides the align-items: property. This property defines the alignment of flex children in the lateral (vertical axis) direction of the current row of the flex container.
So we can easily implement the following CSS styles (the HTML template is the same as the template provided by the fourth solution, so I won't repeat it here)
.article{
display: flex;<br> align-items: center
height: 300px;
border: 1px solid red;
}
It is emphasized here that using align-items will set all the children of the flex container to be vertically centered. If you only want to set a vertical center for one child, you can directly add the align-self: center property to the child.
CSS style
.article{
display: flex;
height: 300px;
border: 1px solid red;
}
.content {
align-self: center;
}
6, grid (grid layout)
The grid layout also provides us with align-items to set all the sub-items to be vertically centered, so it is easy to use
.article{
display: grid;
border: 1px solid red;
align-items: center;
}
Just like the flex layout, align-items:center will set all the children of the grid container to be vertically centered. If you want to set individual children to be vertically centered, you only need to add the align-self:center property to the child that needs to be set.
.content{
align-self: center;
}
to sum up
The above is my brief description of several vertical methods. It can be seen that it is very simple to use the currently popular flex and grid layouts, but their compatibility is not very good. The use of the use must consider compatibility issues. The two methods of line-height can also achieve vertical centering but have great limitations. Table-cell can also be implemented, but the current table layout is slowly being abandoned, so I personally feel that using position and transform is a good choice, but If compatibility issues are not considered, it is more convenient to use flex or grid.