Share 7 techniques for achieving CSS vertical centering (with code)

The demand for vertical centering of CSS on web pages has never stopped, and its difficulty has never been easy. After research by every developer, it is said that there are nearly ten vertical centering techniques for CSS. But it is still little known. Some companies even regard CSS vertical centering skills as interview questions. Its importance is evident. Today, I will take you to learn about the various ways of CSS vertical centering.

1. Line-height

Applicable scenarios: vertical centering techniques for single-line text

This method should be the most well-known, and is common in single-line text The most common way to apply text is objects such as buttons, or elements such as drop-down boxes and navigation. The principle of this method is that after setting the line height of a single line of text, the text will be located in the vertical middle of the line height. Using this principle, the vertical centering requirement can be easily achieved.

<div class="content">Lorem ipsam.</div>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

2. Line-height inline-block

Applicable scenarios: Vertical centering techniques for multiple objects

Since you can use the first If you can achieve vertical centering of row elements in this way, of course there is no reason why you can't do multiple rows~ But you need to treat multiple elements or multi-row elements as one row element, so we must wrap this data in one more layer. And set it to inline-block, and use inline-block in the outer object of the inline-block object to replace the height setting, so that you can achieve the purpose of vertical centering, so that your data includes the title It can also be vertically centered normally including the content.

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

3.:before inline-block

Applicable scenarios: CSS vertical centering techniques for multiple objects

:before pseudo-class element The writing method with the inline-block attribute should be a very traditional vertical centering technique. The advantage of this method is that the child element can be centered without the need to set a special height. We will use the :before pseudo-class element to set it to 100% high inline -block, and then set the child elements that need to be centered to the inline-block property, you can use vertical-align:middle to achieve the purpose of vertical centering. This method was actually a great vertical centering solution in the past. , only the small flaw of 4-5px space between inline-block elements needs to be specially dealt with, but it is also very practical.

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:&#39;&#39;;
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

4. Absolute margin negative value

Applicable scenarios: vertical centering skills for multi-line text

Who said absolute positioning is less use? Amos believes that there is no problem of using less and more. The key point is whether you use it properly. In this example, absolute positioning will set top:50% to capture 50% of the space height, and then set the margin-top of the centered element. Set the height to negative half, so that the element can be centered. Is this method a centering method that has been passed down for many years?

<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

5. Absolute margin auto

Applicable scenarios: Vertical centering techniques for multi-line text

Another absolute positioning vertical centering Solution, this method is a bit special. When the element is set to absolute positioning, it is assumed that it cannot capture the overall available space range, so margin:auto will fail, but when you set top:0;bottom:0; At this time, the absolutely positioned element has captured the available space. At this time, your margin:auto will take effect (magic). If your absolutely positioned element needs to be horizontally centered on the parent layer, you can also set left: 0;right:0; to allow the absolutely positioned element to obtain the available space, and then set margin-left and margin-right to auto to center it. But the disadvantage of this method is that your positioned element must have a fixed width and height (percentage also counts) in order to be properly centered.

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

6. Display: table-cell

Applicable scenarios: Vertical centering skills for multi-line text

I think this trick Older developers should have seen it. Of course, it is the first time for a new developer like me to see it. The principle of this trick is to use the CSS display property to set the div to a table cell, so that Use the vertical-align attribute that supports storage cell alignment to vertically center information

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

7. padding

Applicable scenarios: vertical centering of multi-line text Tips

What! This is also considered a vertical centering technique. Even my grandma knows this method, right? Yes, this is indeed a vertical centering method. It cannot be denied that this method is really too simple, so that it is a bit The developers think that this method cannot be regarded as a vertical centering technique, but you can't refute the fact that my data is indeed vertically centered. Well, just think of me as a hard concave. You are right, okay.

<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

Summary: The above introduces 7 CSS vertical centering techniques to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

The above is the detailed content of Share 7 techniques for achieving CSS vertical centering (with code). For more information, please follow other related articles on the PHP Chinese website!