Position an element with relative x but absolute y coordinate - css

Question

I have this layout:
So I have three Material UI Columns in a row, which have different widths I don't know in advance. Now I want to place Button ("Create Item") at the bottom of the screen (absolute), but horizontally centered to the middle (i.e. the main) Column. The content of this middle column can be short, or even more than fits on a screen, and is scrollable in that case.
The problem: The Button positioning does not work.
Placing the Button with a fixed position doesn't center it horizontally at the middle column but the screen.
Placing it at the bottom of the middle column's content with a relative position and textAlign: 'center' messes with the button vertical position (it can even get pushed out of the screen if the middle column's content is too long).
Placing it at the top of the middle column with textAlign: 'center', transform: 'translateY(85vh)' looks only nice until you start scrolling down and you see the Button moving up.
How can I achive this "floating" behavior just regarding the vertical position?
Edit - here's a minimal example:
<Grid container>
<Grid xs={2}>
<Box style={{ textAlign: 'center' }}>
<div>Left Column for Navigation</div>
<div>Nav 1</div>
<div>Nav 2</div>
</Box>
</Grid>
<Grid xs={6}>
<Grid
style={{
zIndex: 9001,
position: 'relative',
textAlign: 'center',
maxHeight: 0,
transform: 'translateY(85vh)',
}}
>
<Button>Create Item</Button>
</Grid>
<Box style={{ textAlign: 'center' }}>
<Grid>Main Column</Grid>
<Grid>Many Items,</Grid>
<Grid>it might even</Grid>
<Grid>require scrolling</Grid>
</Box>
</Grid>
<Grid style={{ textAlign: 'center' }} xs={4}>
<div>Right Column For Context-Related Stuff</div>
<Grid>Context Entry 1</Grid>
<Grid>Context Entry 2</Grid>
<Grid>Context Entry 3</Grid>
</Grid>
</Grid>
In this example, the Button "Create Item" would get scrolled away if there where more items in the main column, but I want it floating at a fixed y-position at the screen.