Horizontal and vertical alignment in materialize framework

Question

How can I center the login box both horizontal and vertical?

Here is my structure:

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

I tried using valign-wrapper and valign class but it does not work.

Have you done a Google search for vertical and horizontal centering CSS? There's a ton of guides on that. — Roope, Aug 06 '15 at 12:20
You can try looking into using `position: absolute;` and offsetting it by 50% of the height and width of the element it's in, it's hard to say if that'd be helpful without knowing what the rest of your code is doing. — gaynorvader, Aug 06 '15 at 14:46
I would most likely add a margin-left: ; or margin-right: ; and a margin-top:; or margin-bottom:; , that way you can move it around. If none of those do anything, you could try position: absolute;, but it can provide more issues doing so. — Xariez, Nov 11 '15 at 08:39

score 16 · Answer 1 · answered Nov 14 '16 at 08:47

Here is the proper (materializecss) way to do it and without messy 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 = create ton of divs with addition of style tags? — Bibipkins, Sep 29 '19 at 13:28

score 9 · Answer 2 · answered Feb 28 '16 at 19:08

Simply use offset to align. Offset the card view by half of what's left.

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

This doesn't vertically align as stated. See my answer below. — friek108, Nov 14 '16 at 08:48
This works, but for the vertical alignment, you just need to wrap it in```
``` - or something similar depending on page structure. — Mark, Mar 07 '20 at 14:33

score 7 · Answer 3 · answered Feb 17 '16 at 11:05

Try to this solution, I hope it can help you

.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%);
}

Also you can try

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

score 0 · Answer 4 · answered Nov 13 '15 at 02:16

0

have you tried

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

Check out this fiddle, http://fiddle.jshell.net/8vu47fb2/

use margin-top, margin-bottom to align the box at center.

answered Nov 13 '15 at 02:16

Jinu Kurian

9,128
3
27
35

score 0 · Answer 5 · answered Nov 13 '15 at 04:11

0

Set text align property of 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">

see here http://jsfiddle.net/kuqqdswg/

answered Nov 13 '15 at 04:11

repzero

8,254
2
18
40

In materialize this is the same as `.center-align` – Bernardo Dal Corno Sep 11 '17 at 13:13

score 0 · Answer 6 · answered Jan 03 '17 at 02:51

0

You need to herit full height, starting at html and body tags.

answered Jan 03 '17 at 02:51

uruapanmexicansong

3,068
1
18
22

Horizontal and vertical alignment in materialize framework

6 Answers6