1

I'm new at CSS and I want to position the Inputs in the middle of the page, regardless to the button on the left,
+ the site must be responsive. enter image description here

My CSS only position them at the top center, but how can I set the top by my choice? (top won't work here)

display: 'flex',
justifyContent: 'center',
  1. The display: 'flex' blocks the "Email Address" (the 3rd) input's CSS display: 'block', how can fix it to be below ?
 email: {
    width: 'auto',
    display: 'block',
    margin: theme.spacing(1),
  }

(The page is ReactJS)

ExtraSun
  • 528
  • 2
  • 11
  • 31
  • 1
    Does this answer your question? [Positioning
    element at center of screen](https://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen)
     – JW Geertsma Aug 18 '21 at 11:28
  • 1
    @JWGeertsma No I tried this before, its good only with one `div` element, See the post headline – ExtraSun Aug 18 '21 at 11:36
  • 1
    you said no to the question linked by @JWGeertsma and below you say thanks to an answer that is almost the same as the one in the linked question (PS: you don't need viewport unit, use fixed position) – Temani Afif Aug 18 '21 at 13:59
  • you said thank you to an answer that exist there so not sure what are proving with your comment. *you* are confirming that the linked question is what you need – Temani Afif Aug 18 '21 at 15:11

2 Answers2

2

You could operate with viewport units and translate. For example:

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

1 vh is relative to 1% of the height of the viewport, 1 vw to the width of the viewport. So the upper left corner ist positioned in the middle of the screen. Now you translate the whole thing by 50% of it's own width and height.

schmauch
  • 630
  • 1
  • 7
  • 10
  • Thank you ! that's helped me a lot, but I didn't get the `transform: translate`, I read in https://developer.mozilla.org/en-US/docs/Web/CSS/transform but didn't understand. – ExtraSun Aug 18 '21 at 12:10
  • 1
    Maybe this helps: https://css-tricks.com/centering-percentage-widthheight-elements/ – schmauch Aug 18 '21 at 12:48
-1

Or to achieve this with display:flex you must set the height of the html and the body to 100%.

html, 
body {
    height: 100%;
}
schmauch
  • 630
  • 1
  • 7
  • 10