4 commonly used CSS methods to achieve vertical centering

This time I will bring you 4 commonly used CSS methods to achieve vertical centering. What are the precautions for CSS to implement vertical centering? . Here are practical cases, let’s take a look.

Line-heightline-heightAchieving vertical centering of a single line of text

I used to think that the vertical centering of a single line of text requires the height Set the same value as the row height, but there is 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>测试文字</p>

Settingsvertical-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, all its child elements can be vertical Centered. This is similar to the vertical centering of cells in tables

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

[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>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   

[2] If the child element is a picture, set the row height of the parent element instead of the height, and set the font-size of the parent element to 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>
  <img  alt="4 commonly used CSS methods to achieve vertical centering" >  
</p>

【3】Achieve vertical centering effect by adding new elements

Set the height of new elements to the parent height , the width is 0, and the inline-block element of vertical-align:middle is also set to be vertically centered. 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>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 

Three ideas: Vertical centering through absolute positioning

[1]If the child element has an uncertain height, use top50% with translateY (-50%) can achieve 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>
  </p><p>测试文字</p>

[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>
  </p><p>测试文字</p>

In horizontal center alignment, put a layer of p on the outer layer of the element and set absolute, and set the negative margin-left or relative negative left attribute of the element to achieve the horizontal centering effect. 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 flexible box modelflex to achieve vertical centering

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>   

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

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