Display an element in the middle of its parent vertically

Question

This is how the selector looks like:

As you can see, the text appears near the bottom of the selector, I want it to be situated in the middle vertically, horizontally it is fine like that, near the left side.

The selector element:

<div class="MuiFormControl-root searchPlatform"></div>

has:

border: 0;
margin: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;

and the text "Platform" is a label: <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">

I've tried to add vertical-align: middle; in its style but doesn't change its position.

How can it be positioned in the middle vertically?

For flexbox the attributes are `align-item` and `justify-content`. You can find more explanation [here](https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Flexbox) — Dorian B, May 20 '20 at 06:15

score 1 · Accepted Answer · answered May 20 '20 at 06:32

justify-content is one possible way to go:

.searchPlatform {
 /* for demo purposes*/ 
  border: 1px solid black;
  height: 50px;
  width: 150px;
  
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
  flex-direction: column;
  vertical-align: top;
  
  /* "new" code */
  display: inline-flex;
  justify-content: center;
    
}

<div class="MuiFormControl-root searchPlatform"><label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">Platform</label></div>

score 1 · Answer 2 · answered May 20 '20 at 06:33

You can try this : You should use display as flex as display as well as justify-content and align-items properties to center will align the contents in the center (in both axis).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid green;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <button>this is a button</button>
    </div>
  </body>
</html>

.center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid green;
      }

<div class="center">
      <button>this is a button</button>
    </div>

Display an element in the middle of its parent vertically

2 Answers2