当大多数设计师忙于将各种组件放在一个页面上时，他们面临着最令人困扰的问题之一，即在布局中创建相同的高度。为了解决这个麻烦，Uplers 向您介绍了一些着陆页争议以及如何通过这些着陆页提示解决它们。让我们开始吧。
登陆页面提示：
#使用 Flex CSS 实现同等高度：
Flexbox布局模块 旨在解决使用 CSS 显示等高的问题。它是一种高效且 业务主管 灵活的方式，可以管理几乎所有类型的布局。它几乎不会在最初错误的布局外观和正确布局的外观之间造成时间差。对于 JavaScript 解决方案，下载文档需要时间，之后再下载相应的 JS 文件（如果有），并下载块中的图像。
另一方面，Flexbox 是即时的，因为 JavaScript 只需几秒钟。虽然这种 JavaScript 情况适用于那些使用不支持 Flexbox 的浏览器的人。但是，Flexbox 消除了选择特定内容类型、限制字数、剪切中间流句子等的必要性。Flexbox 具有提供内容灵活性的好处，因为它计算了容器内的可用空间。
它可以在最新版本的 Chrome、Android、Safari、Opera、Firefox 和 Internet Explorer 10+ 中完美运行。
#使用边距和填充实现同等高度：
仅使用 CSS 实现等高列是一种常见的情况，只需几个简单的解决方案即可。在遵循标准内容侧边栏布局的项目中，有助于让两个容器看起来都延伸到页面底部。
此方法使用边距、填充和溢出来强制列的高度相等。该方法需要在每个浮动元素的底部设置足够大的填充，并在相同元素的底部用相等的负边距抵消它。诀窍是将父容器上的溢出设置为隐藏。这在最新版本的 Chrome、Android、Safari、Opera、Firefox 和 Internet Explorer 9+ 中完美运行。
登陆页面提示-LPP
#使用 Flexbox 垂直居中对齐：
CSS 缺乏使元素垂直居中的良好方法，这几乎自其存在的整个过程中一直是其声誉的一个污点。
更糟糕的是，用于垂直居中的技术很模糊且不直观，而明显的选择（例如，vertical-align:middle）在你需要时似乎从来不起作用。
目前，垂直居中的方案包括负边距、display:table-cell 以及涉及全高伪元素的荒谬技巧。虽然这些技巧有时能完成任务，但它们似乎并非在所有情况下都有效。如果您想要居中的内容尺寸未知，并且不是其父元素的唯一子元素，该怎么办？如果您可以使用伪元素技巧，但您需要这些伪元素用于其他用途，该怎么办？
有了 Flexbox，您就无需再担心了。您可以使用 align-items、align-self 和 justify-content 属性轻松地对齐任何内容（垂直或水平）。
#使用表格单元格垂直居中对齐：
CSS 表格可能适合您，也可能不适合，因为表格的渲染方式与普 通的块级 div 略有不同。例如，100% 宽度，表格只会拉伸到其内容所需的宽度；而默认情况下，块级元素会自动扩展至其父元素的宽度。
如果我们在父元素内部设置一个高度为 100% 的“幽灵”元素，那么我们 vertical-align: middle 和要居中的元素都会达到同样的效果。
由于 vertical-align 属性适用于表格单元格，因此我们将父 div 设置为 CSS 表格，将子 div 设置为表格单元格。然后我们可以安全地使用 vertical-align: middle 将子 div 的内容垂直居中。
此方法适用于多行文本，容器 div 将随内容动态增长。不幸的是，如果不进行修复，它不适用于 IE6 或 IE7。
登陆页面设计技巧-LPP1
实施这些解决方案后，您的登录页面的对齐和设置高度将变得轻松。
但是，如果您正在处理更多与登陆页面相关的问题，那么 Uplers 可以帮助您设计和编写漂亮的登陆页面。立即访问我们的订单页面，获得完美的登陆页面。