Doing notes yesterday when I saw an interview questions, how to realize the horizontal vertical center, although the in the mind have a little number, but seeing several answers, decided to do it yourself validation, the validation of the start appeared a little problem, then like stir up a hornet’s nest, a variety of doubts, and I want to know, for most, Finally, the problem was fixed on line-height and vertical-align.

Everyone should be using Flex by now, but after all, it took a while to write down what you learned

1. Confusing code

<div class="container"> <div class="box"> I want to center it horizontally and vertically </div> </div>Copy the code
.container{
    border: 2px solid black;
    background-color: chartreuse;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
.box{
    display: inline-block;
    line-height: normal;
    font-size: 1rem;
    vertical-align: middle;
    background-color: cornflowerblue;
}
Copy the code

Don’t tell me, it’s really in the middle:

2. Some knowledge

2.1 Horizontal and vertical alignment

There are some doubts really just their own ignorance ha ha ha

  • text-alignNot only on text, but also on inline elements and inline block elements, setting horizontal alignment
  • vertical-alignWorks only on inline elements and inline block elements, and sets the vertical alignment of elements

2.2 the line – height

Interestingly enough, my impression of line-height is that when the element height equals line-height, the text inside the element is vertically centered. But when I checked the data yesterday, I found that there were a lot of complicated problems involved.

Line-height can be used for the spacing of multiple lines of text or the height of a single line of text

See here you can take a look at the following two reference articles, draw the following conclusions:

  • Element height is used when no height is setline-heightThis property is inherited. It also comes with default values, so when you set an element that has no height setline-height:0;Even if there is text in it, it will collapse.
  • Can be divided into several boxes when you set upline-heightWhen, the line box does not change, the change is the line spacing, it only byfont-sizeThe decision. This is actually the top elementheightIs equal to theline-heightWhen the element’s text would be vertically centered.
  • Values fornumberWhen,line-height 为 numberTimes the current elementfont-size, takenormalTime in general isnumber1.2

3. Confusion

Vertical-align: bottom; vertical-align: bottom; The effect remains the same, but change it to vertical-align: top; It worked as follows:

4. Solve

Really, before I started blogging, I didn’t understand why this weird situation was happening, but as I was writing, inspiration came to me. Hahaha

Vertical-align: middle looks like this:

Comment out, it looks like this, no vertical center:

So the front is just a coincidence, because it is a single line of text, balance up and down line spacing, should not be called line spacing, should be in order to balance will appear vertical center effect oh!

Toss about for a long time seems to have solved a small bug that does not have any use! Hahaha. When looking for information, I saw zhang Xinxu’s CSS world everywhere. After being tortured, I also placed an order immediately. I hope I will go to see it.

Reference:

Really understand line-height, height and line-height in CSS

Learn notes line-height in CSS

\