关于垂直居中又有什么需要注意的呢?

书接上文,本次我们来谈谈怎样根据需求来做到合适的垂直居中。

1.文字居中-line-height;

在文字垂直居中的时候我们需要引入一个概念:行高;行高可以定义文字在某个高度居中排列;真好,自带居中属性。但往往,一个元素,一个元素顶部或底部距文字有个段前端后距离,单排文字还好,多排文字的时候改怎么办呢?别急,盒模型里边儿有个padding区域,而行高是在content区内计算,那么我们可以直接用上下的padding撑开段前段后距离即可。

html:
<p class="p">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
css:
.p{
    margin:50px;
    padding:100px 0;
    line-height: 50px;
    background-color: #66ccff;
}
line-height垂直居中.png

等等,别着急。我猜你可能想用在a标签上,想把它变成一个大小可控的按钮。哈哈哈,在这里很负责的告诉你,行内元素不支持上下的padding。上下的margin支持也是有问题的。

2.关于vertical-align:middle;的感想:

官方解释为:该属性定义行内元素的基线相对于该元素所在行的基线的垂直居中对齐。
 ???好像很简单的样子,直接给元素加上这条样式就能居中了吧。实则不然。当你慌慌张张写上去,你会发现,要不他不搭理你,要吗他懒洋洋的搭理你(有变化,但可能仍不居中)。

html:
<div class="box">
    <span>我需要后面的图片在居区块儿中居中显示</span>
    ![](img/6188f636afc379319f87f.jpg)
</div>
css:
img{
    border: 0;
    vertical-align: top;
    /* 清除图片的默认样式,行内块元素不设置垂直对其方式,底部有间隙 */
}
.box{
    margin:50px;
    height:300px;
    background-color: #66ccff;
}
.box span{
    vertical-align: middle;
}
.box img{
    height:200px;
    vertical-align: middle;
}
vertical-align:middle猜想.png

这是因为,vertical-align设置的是行内元素本身基线对齐的方式。本身?基线对齐~!讲到这儿你应该明白了,好像跟父级元素都没扯上关系,那自热不能再块元素中居中咯?
 也还是有办法,如有某个行内元素跟父级元素一样高,行内元素基线对齐方式为中线对齐,那之后排列的行内(块)元素不就居中咯;

/* 现在我们给文字加上父级高度的行高 */
.box span{
    line-height: 300px;
    vertical-align: middle;
}
vertical-align:middle垂直居中.png

 如果你有写过表格布局,有些时候你一定非常喜欢表格里边的内容会自动水平和垂直居中;其实利用table-cell的特性,你也可以很简单的做到这一点:

html:
<div class="box">
    ![](img/6188f636afc379319f87f.jpg)
</div>
css:
.box{
    display: table-cell;
    width:500px;
    height:300px;
    background-color: #66ccff;
    text-align: center;
    vertical-align: middle;
}
.box img{
    height:200px;
}
display:table-cell垂直居中.png

 这次需要把vertical-align:middle;设置给父级元素了哟;

Tip:
  • 在IE6,7下,不允许把其他类型的元素设置为table-cell;

3.使用position:absolute;来定位垂直居中:

之前咱们做过相对定位和绝对定位的水平居中,掌握其用法之后,在垂直居中布局也是大同小异。

相对定位:
html:
<div class="wrap">
    <div class="box">这是一个相对定位的块元素</div>
</div>
css:
.wrap{
    height:500px;
    border:3px solid #000;
    /* 阻止margin传递 */
    background-color: #ccc;
}
.box{
    position: relative;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    width:400px;
    height:300px;
    background-color: #66ccff;
}
Tip:
  • 注意margin传递;


    position:relative垂直居中.png
绝对定位:
html:
<div class="wrap">
    <span class="span">这是一个绝对定位的内嵌元素</span>
</div>
css:
.wrap{
    position: relative;
    height: 500px;
    background-color: #ccc;
}
.span{
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    width:400px;
    height:300px;
    background-color: #66ccff;
}
position:absolute垂直居中.png

3.弹性盒模型实现垂直居中:

通过文档流实现:
html:
<div class="wrap">
    <div>弹性盒模型的子元素1</div>
    <div>弹性盒模型的子元素2</div>
</div>
css:
.wrap{
    display: flex;
    flex-direction: column;
    /* 改变主轴方向为垂直(从上到下) */
    justify-content: center;
    /* 主轴对齐方式为居中 */
    height:500px;
    background-color: #ccc;
}
display:flex垂直居中1.png
通过margin:auto;实现:
html:
<div class="wrap">
    <div>弹性盒模型的子元素1</div>
    <div>弹性盒模型的子元素2</div>
</div>
css:
.wrap{
    display: flex;
    height:500px;
    background-color: #ccc;
}
.wrap div{
    margin:auto 0;
    width:500px;
    height:200px;
    border:thin solid #000;
    background-color: #66ccff;
}
display:flex垂直居中2.png
Tip:
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 4,822评论 8 34
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,085评论 3 30
  • 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
    若邪Y阅读 3,328评论 1 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 在页面布局中,居中在各种各样的场景中广泛被用到,也经常被新人提及。以前做过一些自己探索居中问题的demo,今天翻出...
    彬_仔阅读 283评论 0 6