开始

本篇文章是2023暑期青训营笔记的第五篇!不知不觉已经过半了,真开心.本篇文章打算说一下之前写页面使用的,关于垂直居中与隐藏元素的布局小技巧,希望看到的同学能有些收获.

垂直布局

前面的那篇简要介绍了flex布局与grid布局,用这两个布局可以很轻松的实现垂直居中.但随着项目的开发,我发现flex与grid不是万能的,所以趁此机会总结一下常用的垂直居中方式.

flex与grid

如果要对某个元素进行垂直居中处理,首先可以想到flex与grid,实现简单,功能繁多.除了垂直居中,还能实现水平居中,元素全在右侧等很多排布方式.强烈推荐!

.box{
    display:flex;
    
}

设置merge

这个方法我经常用于页面居中,页面会处在中间,两侧产生相同大小的空白,随着视窗缩小,空白也会自动减小.使用简单.

.box{
    merge: 0 auto;/* 上下0边距,左右自动*/
}

absolute绝对布局

在使用absolute绝对布局时,flex就没有这么好用了.absolute有自己的垂直居中方式.

.parent {
    ...
    position: relative;
}
.child {
    ...
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

记住"子绝父相",transform: translate(-50%, -50%);是让元素移动相对自身50%的位置,这是因为元素的位置从左上角开始计算,居中实际上是居中那个坐标点.

文字居中

熟悉的line-height属性可以设置行高,当设置与容器大小相同时,文字会垂直居中.

.box{ 
    width: 400px; 
    height: 300px; 
    line-height: 300px; 
}

隐藏元素

隐藏元素的方式其实有许多种,都是为了适应不同要求.

opacity:0

将元素透明度设置为0,此时元素依旧存在.

.box{
    opacity:0;/* 占据空间，可以点击 */
}

visibility:hidden

将元素隐藏,与opacity的差别在于不能进行互动.

.box{
    visibility:hidden; /* 占据空间，无法点击 */
}

display:none

元素会被去掉,不存在于文档中,是最绝对的方法.

.box{ 
    display:none;/* 不占据空间，无法点击 */
    }

overflow:hidden

隐藏元素的溢出部分,经常用于图片大小溢出内容隐藏,防止"出框".

.box{
     overflow:hidden; /* 占据空间，无法点击 */
}

position

一个比较有趣的方法,我没有实践过,一起记录一下.

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不占据空间，无法点击 */
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 占据空间，无法点击 */
}