欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

Css实现竖直居中的N种场景及N种要领

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

刚开始事变的时辰,Css 里的竖直居中一向是个老浩劫题目。每次用到的时辰都去网上搜,搜,搜,半天才搜到吻合的办理要领。然后下次碰着,呃,又忘了~

其后细心回想了一下,着实CSS实现竖直居中是有几种差异的应用场景的,必要别离行使差异的办理要领。这也是为啥每次都认为,诶前次谁人办理要领仿佛不可呢?(原本并不是我智商的题目)好了空话不多说,记录下碰着的差异场景及办理要领,但愿能对本身可能别人有所辅佐。

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;
}

假如老娘就不想行使 padding 不利便行使 padding 时,可以通过给元素配置 line-height,使其便是父容器的高度,从而实现竖直居中。留意,此时记得要思量父容器的 padding 和 border 带来的高度变革。

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

和单行文本一样,给元素上下添加沟通巨细的 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);
}

2. 块级元素高度不牢靠

与上面提到的行使绝对定位居中的要领道理相同,只不外在元素高度不确定的环境下,借助 translateY 使元素向上移动自身高度的一半,进而实现竖直居中。更多出色内容存眷微信公家号:全栈开拓者中心(admin10000_com)

/* 先将元素的上界线置于竖直的中间*/
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;
}

今朝想到的就这些,应该足够包围大部门的行使环境了~ 以上这些实现要领,虽然也可所以殽杂行使的,详细怎样,就看应用场景啦。

本文地址:http://itbyc.com/web/13191.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1