Horizontal and Vertical Align Div

Question

I'm trying to vertically and horizontally align a login div for my Web App, but am having some trouble as I'm rather inexperienced using CSS. I've attached an image of what it looks like on the page, as well as my HTML and styles of the div taken from the Web Dev Tools to see if anyone can help out. For some reason the login div is not being centered horizontally although it appears to be close, and I've tried a few things with the vertical alignment but they haven't worked either. Thank you in advance for any suggestions.

<c:url var="loginUrl" value="/login" />
  
<div class="outer">
    <div class="row" style="vertical-align: middle; display: inline-block; width: 35%;">
        
        <div class="col-md-12 col-md-offset-2">
        
            <c:if test="${param.error != null}">
                <div class="login-error">Incorrect username or password</div>
            </c:if>
    
            <div class="panel panel-default">
    
                <div class="panel-heading">
                    <div class="panel-title">User Login</div>
                </div>
                
                <div class="panel-body">
    
                    <form method="post" action="${loginUrl}" class="login-form">
                    
                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    
                        <div class="input-group">
                            <input type="text" name="username" placeholder="Username"
                                class="form-control" />
                        </div>
    
    
                        <div class="input-group">
                            <input type="password" name="password" placeholder="Password"
                                class="form-control" />
                        </div>
    
                        <div class="input-group">
                            <button type="submit" class="btn-primary float-right">Sign In</button>
                        </div>
                    </form>
    
                </div>
    
            </div>
    
        </div>
        
    </div>

</div>






text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: rgb(33, 37, 41);
text-align: center;
box-sizing: border-box;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
vertical-align: middle;
display: inline-block;
width: 35%;

Answer 1

May I suggest flexbox, the parent div will be set to that with justify content and align-items set to center. Then a child div with your html inside it will be centered. https://css-tricks.com/centering-css-complete-guide/

.parent{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <div> your HTML here </div>
</div>