CSS four methods to achieve vertical centering-CSS Tutorial-php.cn

This article will sort out four types of CSS for you to achieve the vertical centering effect. The idea is clear and very good, and it has reference value. Friends who need it can refer to it

Line-height To achieve vertical centering of a single line of text

I used to think that the vertical centering of a single line of text requires setting the height and line height to the same value, but there is actually no need to set the height. In fact, the text itself appears centered on a line. Without setting a height, the row height expands the height.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p class="test">测试文字</p>

Copy after login

##Set vertical-align:middle to achieve vertical centering

【1】Set the display of the parent element to table-cell

By setting vertical-align:middle for the table-cell element, its child elements can be All achieve vertical centering. This is similar to the vertical centering of cells in tables

[Note] If IE7-browser supports it, you can change it to table structure

[Note] The p set to table-cell cannot use floating or absolute positioning, because floating or absolute positioning will make the element have block-level element characteristics, thereby losing the vertical alignment function of the table-cell element.

If you need floating or absolute positioning processing, you need to add a layer of p outside.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
    <p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>   
</p>

Copy after login

CSS four methods to achieve vertical centering

[2] If the child element is a picture, replace the height by setting the row height of the parent element, and set the parent The element's font-size is 0.

vertical-align: The explanation of middle is that the midpoint of the element is aligned with the baseline of the parent element plus 1/2 the height of the letter X in the parent element. Because the character X is not vertically centered in the em box, and the high and low positions of the character X in each font are inconsistent.

So, when the font size is larger, the difference is more obvious. When font-size is 0, it is equivalent to setting the font size of character X to 0, so complete vertical centering can be achieved.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</p>

Copy after login

CSS four methods to achieve vertical centering

【3】Achieve vertical centering effect by adding new elements

The height of the new element is set to the height of the parent, the width is 0, and the vertically centered vertical-align:middle inline-block element is also set. Since the space between the two elements is parsed, you need to set font-size:0 at the parent level, and then set font-size to the required value at the child level; if the structural requirements are not strict, you can display the two elements in one line , then there is no need to set font-size:0.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
  <p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
  <i class="childSbling"></i> 
</p>

Copy after login

Three ideas: Vertical centering through absolute positioning

【1】If the height of the child element is not fixed, use top50% and translateY(-50%) to achieve the centering effect.

The percentage of the translate function is relative to its own height, so top:50% combined with translateY(-50%) can achieve the centering effect.

[Note] IE9-browser does not support;

[Note] If the height of the child element is known, the translate() function can also be replaced with margin-top: a negative height value.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copy after login

[2] If the height of the child element is fixed, combine the absolutely positioned box model attributes to achieve the centering effect

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copy after login

In horizontal center alignment, put a layer of p on the outside of the element and set absolute, and set negative margin-left or negative relative of the element. The left attribute can achieve the effect of horizontal centering. But since margin is relative to the width of the containing block, margin-top:-50% gets the width instead of -50% of the height, so it is not feasible; for the relative percentage value, the height of the containing block is auto In this case, chrome, safari and IE8+ browsers do not support setting the percentage top value of the element, so it is not feasible.

Idea 4: Use the flexible box model flex to achieve vertical centering

[Note] IE9-browser does not support

【1】Set the cross-axis alignment on the scalable container align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

Copy after login

【2】Set it on the scalable item margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>

Copy after login

The above is the detailed content of CSS four methods to achieve vertical centering. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css center

source：php.cn

Previous article：Introduction to the responsive mode layout method using calc() in CSS3 Next article：Detailed explanation of how to implement a 0.5 pixel border with CSS

Statement of this Website

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