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

Mark B · Accepted Answer · 2020-07-01T03:19:30.320

0

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>

edited Jul 01 '20 at 03:19

answered Jul 01 '20 at 03:06

Mark B

415
4
13

Yes this worked in terms of the horizontal alignment! But the vertical is still not down in the center of the page... – CDA the Programmer Jul 01 '20 at 03:14
1

sorry, I got it to work. edited my code above, just set the height to 100vh in the parent class.. – Mark B Jul 01 '20 at 03:20
Yes this worked thanks for the quick response! – CDA the Programmer Jul 01 '20 at 03:23
glad it worked!! enjoy! – Mark B Jul 01 '20 at 03:25

score 0 · Answer 2 · answered Jul 01 '20 at 03:26

Flex box is the best way to achieve this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Simply put, you need a container (the flex box) which holds the elements you wish to align. You can just create a div and give it a class called 'container' or 'flex-container' or whatever you'd like. Then, you need to set the display to flex, and position your child elements (the elements you put into the flex box) using the align-items and justify-content styles. Align-items will center your items on the cross axis, while justify-content will align them on the main axis (depending on the direction of your line). Another good style to use is called flex-direction, which you can set to be a column or row. This will place your child elements into a column or a row and is great for layouts.

A flex container would look something like this:

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

You can play around with flex box all you want, it's very useful for layout and positioning and has a lot of flexibility! (Haha, pardon the pun)

This website also has a really good overview of everything: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Horizontal and Vertical Align Div

2 Answers2