How to make layout ignore keyboard for phone users?

I have an item, that I’d like to position in center with

position: absolute;
	top: 50%;
	left: 50%;
translate: transform(50%, 50%);

It works perfectly well, until user focusses on input field that is under address bar. When user does that, this DIV readjusts because website (body) “resizes” because screen needs to fit keyboard. And then this DIV overlaps with the input, which looks just bad.

Are there any fixes to it or alternate solutions? I need to be able to do this without JavaScript.

If I could tell body to not resize itself and force it’s height, that would be great.

Two other methods to vertically align something are: display:table-cell with vertical-align: middle and the other is flex-box, display: flex and align-items: center.
Another idea is to use vh units instead of %.
I honestly don’t know if any of these are affected by mobile keyboards, but you can try it out.


Don’t use absolute positioning to centre and the problem will automatically go away.

Use the display table / table-cell method as Sam suggests. That will allow for vertical centering without ever overlapping.


Can’t. It’s a modal. It must go over every content. Float on top of them all.

% help me put is perfectly in middle. Where as vh is screen dependent.

That should have been the first thing you mentioned not the last :slight_smile:

You can still use the display: table method but have it nested inside your fixed modal which would be sized to the viewport. You could then vertically center the content in the table but put padding on the top (and bottom) of the table cell equal to the height of the input you want to preserve and then the centred content won’t overlap the input. The table will not slide off screen as happens with the transform centring method (I never liked that method).

Of course as you have shown no code or a demo then there could be a 100 things wrong with that approach :slight_smile: If we can see what you have got so far it will be easier to give more specific advice.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.