How To Vertically Align A Button Text That Uses The "vh" Units?

I have a pretty simple example. Normally, buttons vertically align their texts in the center. However, given this example You can clearly see that the top margin is taller than th

Solution 1:

You have the default padding and border applied to button and also box-sizing is set to border-box on button so everything is included in the height you defined which make you calculation wrong.

Use box-sizing:content-box to exclude padding and border:

<buttonstyle="font-size: 18vh; height: 20vh;box-sizing:content-box">
  Click me
</button>

Solution 2:

#Use box-sizing:content-box;

<buttonstyle="font-size:18vh;height:20vh;box-sizing:content-box">Click me</button>

#Try To Use line-height:18vh; Property

<buttonstyle="font-size:18vh;height:20vh;line-height:18vh">Click me</button>

#Use display:flex; Or display:inline-flex; & align-items:center;

<buttonstyle="font-size:18vh;height:20vh;display:flex;align-items:center">Click me</button>

#Try To Use min-height:20vh; Instead Of height:20vh;

<buttonstyle="font-size:18vh;min-height:20vh">Click me</button>

#Try To Increase Height Property's Value To height:22vh;

<buttonstyle="font-size:18vh;height:22vh">Click me</button>

#Try To Remove Height Property

<buttonstyle="font-size:18vh;">Click me</button>

#Try To Decrease Font Size to font-size:16vh;

<buttonstyle="font-size:16vh;height:20vh">Click me</button>

#Try To Use font-size:3em; Instead Of font-size:18vh;

<buttonstyle="font-size:3em;height:20vh">Click me</button>

#Try To Use height:1.3em; Instead Of height:20vh;

<buttonstyle="font-size:18vh;height:1.3em">Click me</button>