Aligning modal content box to center of any screen

Question

Hi i have created login form and need to display that box to center of any screens.Gap should be equal on all the sides in any of the screens.Tried with postion:absolute display flexbut not working.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-heading">
            <h2 class="text-center"><img src="images/logo.png"></h2>
        </div>
        <hr />
        <div class="modal-body">
            <form action="" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" class="form-control" placeholder="User Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="password" class="form-control" placeholder="Password" />

                    </div>

                </div>

                <div class="form-group text-center">
                    <button type="submit" class="btn btn-success btn-lg">Login</button>
                    <a href="#" class="btn btn-link">forget Password</a>
                </div>

            </form>
        </div>
    </div>
</div>

Style.css

.modal-content{
        background-color: #fff;
    }
    .btn-link{
        color:white;
    }
    .modal-heading h2{
        color:#ffffff;
    }

score 1 · Accepted Answer · answered Jun 28 '19 at 07:46

1

.modal-dialog{
position:absolute;
left:50%;
width:400px;
top:50%;
transform:translate(-50% , -50%)
}

add this and it should work!

answered Jun 28 '19 at 07:46

adel

3,436
1
7
20

score 0 · Answer 2 · answered Jun 28 '19 at 07:43

You can making it with display block, margin auto and text align on modal-dialog

.modal-content{
        background-color: #fff;
    }
    .btn-link{
        color:white;
    }
    .modal-heading h2{
        color:#ffffff;
    }
    
    .modal-dialog {
      width:400px;
    display: block;
    margin: 0px auto;
    text-align:center;
}

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-heading">
            <h2 class="text-center"><img src="images/logo.png"></h2>
        </div>
        <hr />
        <div class="modal-body">
            <form action="" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" class="form-control" placeholder="User Name" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                        </span>
                        <input type="password" class="form-control" placeholder="Password" />

                    </div>

                </div>

                <div class="form-group text-center">
                    <button type="submit" class="btn btn-success btn-lg">Login</button>
                    <a href="#" class="btn btn-link">forget Password</a>
                </div>

            </form>
        </div>
    </div>
</div>

it's not possible making auto height, unless you trying this https://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-a-div — dooooooofai, Jun 28 '19 at 08:29

Aligning modal content box to center of any screen

2 Answers2