web前端入门到实战:css实现竖直居中的 N 种场景及 N 种方法

inline 或者 inline-* 的元素竖直居中
可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景:

  1. 单行竖直居中,如单行文本或者链接

这种情况,通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

<div class="container">
    <p>单行文本竖直居中,添加相同的 padding-top & padding-bottom 值</p>
</div>

body {
    margin: 0;
}
 
.container {
    background-color: #fe435e;
    padding: 10px;
}
 
p {
    margin: 0;
    color: #fff;
    /*  相同的上下 padding 值使单行文字居中 */
    padding-top: 100px;
    padding-bottom: 100px;
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

如果不想使用 padding 不方便使用 padding 时,可以通过给元素设置 line-height,使其等于父容器的高度,从而实现竖直居中。注意,此时记得要考虑父容器的 padding 和 border 带来的高度变化。

  1. 多行竖直居中,如多行文本

和单行文本一样,给元素上下添加相同大小的 padding 值,还是好用滴~

<div class="container">
    <p>
        多行文本竖直居中,给元素上下添加相同的 padding 值。<br />
        这只是另外一段无关紧要的,用来测试的废话。
    </p>
</div>

body {
    margin: 0;
}
 
.container {
    background-color: #fe435e;
    padding-left: 10px;
    padding-right: 10px;
}
 
p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /*  给元素上下添加相同大小的padding值 */
    padding-top: 40px;
    padding-bottom: 40px;
}

另外一种方法,是借助 table 的属性:将父容器设置成 table,需要竖直居中的元素设置为 table-cell,然后就可以使用 vertical-align 属性来居中了。

<div class="container">
    <p>
        多行文本竖直居中,将父容器设置为 table,需要竖直居中的元素设置为 table-cell, 然后使用 vertical-align 属性。
    </p>
</div>

body {
    margin: 0;
}
 
.container {
    background-color: #fe435e;
    padding-left: 20px;
    padding-right: 20px;
    height: 400px;
    /* 父容器设置成 table*/
    display: table;
}
 
p {
    width: 160px;
    margin: 0 auto;
    color: #fff;
    line-height: 1.5;
    /* 需要竖直居中的元素设置为 table-cell*/
    display: table-cell;
    vertical-align: middle;
}
块级元素竖直居中
通常借助 绝对定位 和 translate 等手段,在已知或者未知块级元素高度时,分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法,并借助 margin 可以为负值的特性,实现绝对定位居中:

/* 已知元素高度为 100px (也可以是百分比,如 80%)*/
height: 100px;

/* 先使用绝对定位,将元素的上边界置于竖直的中间*/
position: absolute;  
top: 50%;

/* 再使用margin-top,将元素向上移动自身高度的一半*/
margin-top: -50px;  
 
<div class="container">
    <div class="v-c">
        <p>使用绝对定位使元素竖直居中。</p>
    </div>
    </p>
</div>

body {
    margin: 0;
}
 
.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
    /* 父容器需要设置position, 使需要竖直居中的元素相对父容器进行绝对定位*/
    position: relative;
}
 
.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    height: 200px;
    /* 使用绝对定位使元素竖直居中*/
    position: absolute;
    top: 50%;
    margin-top: -100px; 
    /* 需要考虑 padding 和 border, 如果没有设置 box-sizing: border-box; 的话*/
     
}
 
p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

表示类似这段代码的使用频率简直不要太高~ 于是在使用 scss 的前提下,自己封装了一个 mixin,专门用来实现这种定位方式。


// 定义绝对定位实现水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的时候直接引用就可以了,这样可以避免在改动元素宽或高时,还需要同时去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
  1. 块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似,只不过在元素高度不确定的情况下,借助 translateY 使元素向上移动自身高度的一半,进而实现竖直居中。


/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;

/* 再使用 translateY,将元素向上移动自身高度的一半*/
transform: translateY(-50%);  

<div class="container">
    <div class="v-c">
        <p>使用 translateY 使元素竖直居中。</p>
    </div>
    </p>
</div>


body {
    margin: 0;
}
 
.container {
    background-color: #fe435e;
    padding: 0px 20px;;
    height: 400px;
}
 
.v-c {
    width: 400px;
    padding: 0 20px;
    padding-right: 20px;
    background-color: #ade4eb;
    /* 使用 translateY,使元素竖直居中*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
 
p {
    margin: 0 auto;
    color: #fff;
    line-height: 200px;
}

如果大家对编程,web前端感兴趣,想要了解学习的,打算深入了解这个行业的朋友,可以加下我们的前端学习扣qun : 784783012 ,不论你是学生还是想转行的朋友,我都欢迎,不定期分享干货,整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家,学习前端我们是认真的

目前想到的就这些,应该足够覆盖大部分的使用情况了~ 以上这些实现方法,当然也可以是混合使用的,具体如何,就看应用场景啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值