Question

我正在尝试垂直对齐我的Web应用程序的登录div，但是遇到了一些麻烦，因为我不太熟悉CSS。我已经附上了页面上的外观图像，以及从Web开发工具中获取的HTML和div样式，以查看是否有人可以提供帮助。出于某种原因，尽管登录div似乎很靠近，但并未处于水平居中状态，并且我尝试了垂直对齐的一些操作，但它们也没有起作用。预先感谢您的任何建议。

<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

我可以建议使用flexbox，将父div设置为其中对正内容，并将align-items设置为center。然后，其中包含您的html的子div将居中。 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>

Answer 2

Flex box是实现此目的的最佳方法：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

简单地说，您需要一个容器（伸缩盒），用于存放您希望对齐的元素。您可以只创建一个div并给它一个名为“ container”或“ flex-container”的类，或者您想要的任何类。然后，您需要将显示设置为可弯曲，并使用align-items和justify-content样式放置子元素（放置在flex框中的元素）。对齐项将使您的项目在横轴上居中，而对齐内容将使它们在主轴上对齐（取决于行的方向）。可以使用的另一种好的样式称为flex-direction，可以将其设置为列或行。这样会将您的子元素放在一列或一行中，非常适合布局。

flex容器看起来像这样：

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

您可以随心所欲地使用flex box，它对于布局和定位非常有用，并且具有很大的灵活性！（哈哈，对不起，双关语）

此网站还对所有内容都提供了很好的概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

水平和垂直对齐Div

2 个答案: