Materialize框架中的水平和垂直对齐方式

Question

我该如何使登录框在水平和垂直方向上都居中？

这是我的结构：

<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 类，但它们都没有起作用。

- Ordidaad

---

你尝试过哪些 CSS？ - wmk

你在Google上搜索过CSS垂直和水平居中吗？有很多相关的指南。 - Roope

不，我正在使用Materialize框架而不是纯CSS。 - Ordidaad

你可以尝试使用position: absolute;，并将其偏移设置为所在元素高度和宽度的50％，但不知道您的代码的其余部分的情况下是否有所帮助。 - gaynorvader

我最可能会添加 margin-left: ; 或 margin-right: ; 以及 margin-top:; 或 margin-bottom:; ，这样你可以移动它。如果这些都没有效果，你可以尝试 position: absolute;，但这样做可能会导致更多的问题。 - Xariez

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

- friek108

---

使用Materialize来创建大量的div并添加样式标签是合适的吗？ - Bibipkins

Answer 2

只需使用偏移量进行对齐。将卡片视图偏移剩余空间的一半。

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

- cinfwatd

---

这并没有像所述的那样垂直对齐。请参见下面的答案。 - friek108

这个可以工作，但是为了垂直对齐，你只需要将它包裹在<main class="valign-wrapper"></main>中 - 或者根据页面结构使用类似的东西。 - Mark

Answer 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;
}

- Kapil

Answer 4

你试过了吗？

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

看看这个代码片段，http://fiddle.jshell.net/8vu47fb2/

使用 margin-top 和 margin-bottom 将盒子居中对齐。

- Jinu Kurian

Answer 5

标签设置文本对齐属性

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

- repzero

---

在 Materialize 中，这与 .center-align 相同。 - Bernardo Dal Corno

Answer 6

你需要继承整个高度，从 html 和 body 标签开始。

- uruapanmexicansong