在其父元素的中间垂直显示一个元素

Question

选择器是这样的：

如您所见，文本出现在选择器的底部附近，我希望它垂直位于中间，水平就可以，靠近左侧。

选择器元素：

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

有：

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

文本"Platform"是一个标签：<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">

我尝试在其样式中添加 vertical-align: middle; 但未更改其位置。

怎么才能垂直居中呢？

Answer 1

justify-content 是一种可行的方法：

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

Answer 2

你可以试试这个：你应该使用 display as flex as display 以及 justify-content 和 align-items 属性到中心将使内容在中心对齐（在两个轴上）。

<!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

html

css

label

dropdown