css如何快速实现水平垂直居中

教程介绍

垂直居中是布局中十分常见的效果之一，在进行编辑过程中经常遇到，如何在已知元素的宽度和高度及未知的情况下，css快速实现水平垂直居中呢?

html结构：

<div class="parent">
    <div class="item"></div>
</div>

1. 已知元素的宽度和高度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

.item {
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

/* 这个方法可以实现自适应 */

2. 未知元素的高度和宽度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}

.parent {
display: flex;
justify-content:center;
align-items: center;
background: #AAA;
height: 300px; /* 注意这里需要设置高度来查看垂直居中效果 */


}

免责声明

本站所提供的“css如何快速实现水平垂直居中”资源来自于网络，版权争议与本站无关，版权归原创者所有！仅限用于学习和研究目的，不得将上述内容资源用于商业或者非法用途，否则，一切后果请用户自负。
您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性，源码仅供下载学习之用！如用于商业或者非法用途，与本站无关，一切后果请用户自负！本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处，请联系站长以便删除。 敬请谅解！侵权/投稿邮箱：team@lcwl.fun！