水平和垂直对齐 Div

Question

我正在尝试垂直和水平对齐我的 Web 应用程序的登录名 div，但遇到了一些问题，因为我对使用 CSS 相当缺乏经验。我附上了页面上的图片，以及我的 HTML 和从 Web Dev Tools 获取的 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，parent div 将设置为内容对齐，align-items 设置为居中。然后 child div 和你的 html 将居中。 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' 或任何您想要的 class。然后，您需要将显示设置为 flex，并使用 align-items 和 justify-content 样式定位您的子元素（您放入 flex 框中的元素）。 Align-items 将使您的项目在横轴上居中，而 justify-content 将使它们在主轴上对齐（取决于您的线的方向）。另一个很好用的样式称为 flex-direction，您可以将其设置为列或行。这会将您的子元素放入一列或一行中，非常适合布局。

弹性容器看起来像这样：

.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

Horizontal and Vertical Align Div

html

css

vertical-alignment

text-alignment