I have an item, that I’d like to position in center with
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.
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:
vertical-align: middle and the other is flex-box,
display: flex and
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
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.