物化框架中的水平和垂直对齐答案

【问题标题】：Horizontal and vertical alignment in materialize framework物化框架中的水平和垂直对齐
【发布时间】：2015-10-29 12:55:57
【问题描述】：

如何将登录框水平和垂直居中？

这是我的结构：

<div class="container">
<div class="row">
<div class="col s12 m6">
    <div class="card">
        <div class="card-content">
            <span class="card-title black-text">Sign In</span>
            <form>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                        <label for="firstname" class="active">First Name</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                        <label for="lastname" class="active">Last Name</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-action">
            <input type="submit" class="btn" value="Sign In">
        </div>
    </div>
</div>

我尝试使用 valign-wrapper 和 valign 类，但它不起作用。

【问题讨论】：

你试过什么css？
你在谷歌上搜索过垂直和水平居中的 CSS 吗？有很多关于这方面的指南。
不，我使用的是物化框架而不是纯 css。
您可以尝试使用 position: absolute; 并将其偏移它所在元素的高度和宽度的 50%，如果不知道其余部分是什么，很难说这是否有帮助你的代码正在做。
我很可能会添加一个 margin-left: ;或边距右：;和一个margin-top：；或边距底部：； , 这样你就可以移动它了。如果这些都不做任何事情，您可以尝试 position: absolute;，但这样做会带来更多问题。

标签： html css material-design materialize

【解决方案1】：

这是正确的（materializecss）方法，并且没有混乱的 css：

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
    <div class="valign" style="width:100%;">
        <div class="container">
           <div class="row">
              <div class="col s12 m6 offset-m3">
                 <div class="card">
                    <div class="card-content">
                       <span class="card-title black-text">Sign In</span>
                       <form>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                                <label for="firstname" class="active">First Name</label>
                             </div>
                          </div>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                                <label for="lastname" class="active">Last Name</label>
                             </div>
                          </div>
                       </form>
                    </div>
                    <div class="card-action">
                       <input type="submit" class="btn" value="Sign In">
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
</div>

【讨论】：

'proper' for materialize = 创建大量添加样式标签的 div？

【解决方案2】：

只需使用offset 即可对齐。将卡片视图偏移剩下的一半。

<div class="container">
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card">
        <div class="card-content">
          <span class="card-title black-text">Sign In</span>
          <form>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                <label for="firstname" class="active">First Name</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                <label for="lastname" class="active">Last Name</label>
              </div>
            </div>
          </form>
        </div>
        <div class="card-action">
          <input type="submit" class="btn" value="Sign In">
        </div>
      </div>
    </div>

【讨论】：

这不是垂直对齐的。请参阅下面的答案。
这行得通，但对于垂直对齐，您只需将其包裹在<main class="valign-wrapper"></main> - 或类似的东西，具体取决于页面结构。

【解决方案3】：

试试这个解决方案，希望对你有帮助

.card {
     position: absolute;
     left: 50%;
     top: 50%;
     -moz-transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
     -ms-transform: translate(-50%, -50%)
     -o-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%);
}

你也可以试试

body (or container-div) {
    display: flex;
    align-items: center;
    justify-content: center;
}

【讨论】：

【解决方案4】：

你试过了吗

.col.s12.m6{
    float: none;
    margin: 100px auto;
    width: 300px;
    height: 300px;
}

看看这个小提琴，http://fiddle.jshell.net/8vu47fb2/

使用 margin-top、margin-bottom 将框居中对齐。

【讨论】：

【解决方案5】：

设置div的文本对齐属性

<div class="input-field col s12" style="text-align:center">

<div class="input-field col s12" style="text-align:center">

 <input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle">

<input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle">

看这里http://jsfiddle.net/kuqqdswg/

【讨论】：

在物化中这与.center-align相同

【解决方案6】：

您需要继承完整的高度，从 html 和 body 标签开始。

【讨论】：