How to make layout ignore keyboard for phone users?

[zcsozlae]

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.

[SamA74]

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.

[PaulOB]

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.

[zcsozlae]

@SamA74

wo 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.

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

@SamA74

Another idea is to use vh units instead of %.

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

[PaulOB]

@zcsozlae

Can’t. It’s a modal. It must go over every content.

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

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 If we can see what you have got so far it will be easier to give more specific advice.