如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

最新推荐文章于 2023-01-04 15:29:37 发布

weixin_30933531

最新推荐文章于 2023-01-04 15:29:37 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/justif/p/6365639.html

本文介绍了一个使用HTML和CSS实现的知乎登录页面布局方案。通过设置display: inline-block属性，使得登录框居中显示，并保持页面整体居中对齐。同时详细展示了对应的HTML结构和CSS样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

<div class="zhihu">
    <div class="loginMain">

    </div>
</div>

　css部分

.zhihu {
    height:100%;
    min-width:720px;
    text-align: center;
    vertical-align: middle;
}
.zhihu:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.loginMain {
    display: inline-block;
    width:300px;
    height:590px;
    margin:auto;
    background-color: #1b6d85;
    vertical-align: middle;
}

　　要点：元素必须都为inline-block;

转载于:https://www.cnblogs.com/justif/p/6365639.html