位于页面中心的焦点 li答案

【问题标题】：Focus li which is in center of page位于页面中心的焦点 li
【发布时间】：2017-04-01 17:58:55
【问题描述】：

我正在尝试创建像 typeForm 这样的表单。你可以在这里找到例子https://showroom.typeform.com/to/DYJEHG

我成功实现了设计，但问题是我想关注位于页面垂直中心的 li。我尝试了一切但失败了，谷歌上没有教程我们如何做到这一点。请帮忙。

【问题讨论】：

请输入您的代码。你做了什么？
“焦点”是什么意思？如果您的意思是要自动向下滚动到最初不在屏幕底部的元素，请尝试.scrollIntoView()。
请附上您迄今为止尝试过的代码，以便我们帮助您调试或改进它。这就是 Stackoverflow 的工作原理。
我在这里找到了一些东西。让我申请jsfiddle.net/fa90a23u

标签： javascript jquery html css

【解决方案1】：

如果我没记错的话，您希望表单域位于中心（水平和垂直）并且是整页，对吧？

这是您可能正在寻找的工作示例：http://codepen.io/anon/pen/ZewEMM

在这种情况下，

每次滚动只关注一个输入字段：
使用这个名为 fullPage.js 的小插件。这将允许您在每次滚动时专注于一个输入字段。它真的很容易使用，看看吧！这是一个带有 fullpage.js 的表单示例：

<form method="post" action="">

  <div id="fullpage">
    <div class="section formfield">
      <div>
        FULL NAME<br/>
        <input type="text">
      </div>
    </div>
    <div class="section formfield">
      <div>
        EMAIL<br/>
        <input type="text">
      </div>
    </div>
    <div class="section formfield">
      <div>
        MESSAGE<br/>
        <input type="text">
      </div>
    </div>
  </div>

</form>

请注意，为了方便使用和避免混淆，我没有使用<li>。

您也可以通过JS轻松控制每个字段部分的颜色：

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#f0f0f0', '#cccccc', '#f0f0f0'], // section colors
    css3: true,
    scrollingSpeed: 1000
  });
});

将表单域垂直和水平居中：
通过将表单字段元素包装在 div 中来使用 Flexbox。这是一个示例 CSS 代码：

.formfield > div {
   display: flex;
   align-items: center;
   justify-content: center;
}

如果这有帮助，请告诉我，如果您发现我的回答有任何含糊之处，请随时询问。

【讨论】：