（CSS）拉伸div，但内容居中

Question

For example: I have a div with a height of, let's say, 100px. In that div is link ( a -tag).

My CSS:

a:hover, a:focus {
  background-color: gray;
}

That means, I want the background of the link beign gray when it is focused.

---

But stop, it's not that easy. I want also:

• The link stretched all over the height (not in the width, onloy the height) because like this the new backgroundcolor will be from the top to the bottom of the navbar.
• The text in the link should be in the center - vertically

---

I know I can do these to things with display: flex; in the div, but not at the same time. (For stretching I need align-items: stretch; and for vertically centering I need align-items: center; . Obviously I can't use them both.

Answer 1

You can make the link 100% height and vertically centered with flex , height , and align-items

 div { height: 50vh; } a { display: inline-flex; background: #eee; height: 100%; align-items: center; } a:hover, a:focus { background-color: gray; } 

 <div> <a href="#">link</a> </div> 

Answer 2

If your div is, let's say, 100px then all you need to do is set your nested a element to display: inline-block and set its line-height to that of div, which is 100px.

You can try something like this.

 div { height: 100px; border: thin solid grey; } div a { display: inline-block; line-height: 100px; background-color: silver; color: white; text-decoration: none; } div a:hover { background-color: grey; } 

 <div><a href="https://google.com">Clicl Me!</a></div>