水平和垂直对齐 Div [重复]

Posted 2023-03-05

【中文标题】水平和垂直对齐 Div [重复]

【英文标题】：Horizontal and Vertical Align Div [duplicate]

【发布时间】：2020-10-21 10:22:32

【问题描述】：

我正在尝试为我的 Web 应用程序垂直和水平对齐登录 div，但我遇到了一些麻烦，因为我对使用 CSS 相当缺乏经验。我已经附上了它在页面上的样子的图像，以及我的 html 和从 Web 开发工具中获取的 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%;

【参考方案1】：

我可以建议 flexbox，父 div 将设置为 justify content 和 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>

【讨论】：

是的，这在水平对齐方面有效！但是垂直仍然没有在页面中心向下...

对不起，我让它工作了。编辑了我上面的代码，只需在父类中将高度设置为 100vh ..

是的，感谢您的快速响应！

很高兴它成功了！！享受吧！

【参考方案2】：

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

简单地说，你需要一个容器（弹性盒子）来保存你想要对齐的元素。你可以只创建一个 div 并给它一个名为“容器”或“弹性容器”的类或任何你想要的。然后，您需要将显示设置为 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/