时间戳

首页 > 解决方案 > 如何垂直居中输入字段

javascript - 如何垂直居中输入字段

问题描述

我目前正在为可能非常简单的事情而苦苦挣扎，但我无法弄清楚如何做到这一点。我尝试从这里阅读和使用css 技巧或一些较旧主题的技巧和技巧，但没有一个真正帮助我。

这是我的页面，我的目标是使标题居中并在页面中间垂直输入。

接下来我要做的是为该输入设置动画并前往屏幕顶部。我将为其使用 react-spring 转换（因为这是我的 React 天气应用程序），并且在成功调用Axios后将触发动画。但那是另一回事了。我想用这个解释说的是，我认为使用一些使用translateY的方法会很好，因为在 React-spring-transitions 中我将使用类似这样的东西

  const forecastTransitions = useTransition(showForecast, null, {
    from: { opacity: 0,transform:'translateY(50px)' },
    enter: { opacity: 1,transform:'translateY(0px)' },
    leave: { opacity: 0 },
  });

我试过display:flex但它以某种方式破坏了我的应用程序。输入要小得多，并且位置偏左。第二个问题可能是 React-spring 制作了自己的Animated div。

  {inputTransitions.map(({ item, key, props }) =>
    item && <animated.div key={key} style={props}>

    <SearchForm 
      searchCity={searchCity} 
    />

    </animated.div>
  )}

所以我不知道我是否必须设置该 div 的样式，并尝试将其垂直居中或什么。

有谁知道如何解决这种问题？或者，如果有人知道如何用动画解决这个问题，请在此处回复。谢谢你。

标签： javascripthtmlcssreactjstransition

解决方案

您可以尝试margin: 0 auto;或者如果它不起作用，请在父 div 上应用以下样式：

.vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

推荐阅读