文档章节

垂直居中实现方式总结

呵呵闯
 呵呵闯
发布于 2016/12/05 22:52
字数 521
阅读 17
收藏 1
点赞 0
评论 0

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。

方法一 利用 line-height 实现垂直居中

#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

<div id="example1">
    单行文字垂直居中
</div>

这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的内容会溢出。

方法二 利用 display: table 实现垂直居中

#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

<div id="example2">
    <div class="inner">块区域垂直居中</div>
</div>

方法三 margin 填充

#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

<div id="example3">
    <div class="inner">块区域垂直居中</div>
</div>

这种方法需要知道内外容器的大小

方法四 经典 absolute 布局上下文垂直居中

#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

<div id="example4">
    <div class="inner">块区域垂直居中</div>
</div>

这种方法内部容器的宽高,外部容器的宽高可以不定

方法五 Css3下 absolute 布局上下文垂直居中


#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

<div id="example5">
    <div class="inner">块区域垂直居中</div>
</div>

这种方法内外容器都可以是不定的

方法六 利用margin:auto 居中

#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

<div id="expample6">
    <div class="inner">Content here</div>
</div>

方法七 利用 Flex布局 居中

#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

<div id="expample7">
    <div class="inner">Content here</div>
</div>

© 著作权归作者所有

本文转载自:https://my.oschina.net/u/2282680/blog/784838

共有 人打赏支持
呵呵闯
粉丝 3
博文 61
码字总数 15895
作品 0
深圳
程序员
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

musishui ⋅ 2016/11/09 ⋅ 1

CSS布局总结

显示方式 元素的display显示方式有多种,隐藏,块级,内联,内联-块级 1、隐藏 display:none使得被选择的元素隐藏,并且不占用原来的位置。 2、块级 display:block; 表示块级元素块级元素会...

小衰哥有点帅 ⋅ 2017/09/24 ⋅ 0

元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙 ⋅ 2017/08/16 ⋅ 0

关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705 ⋅ 2014/05/07 ⋅ 0

由 Bootstrap 的媒体对象(Media object) 谈 flexbox

CSS3 弹性盒子(flexbox),是一种新的布局方式。使用 flexbox,可以很方便的实现常见的布局以及居中效果。Bootstrap v4 的 Media object 也是使用 flexbox 来实现。flexbox 相关的属性较多,本...

⋅ 2017/12/18 ⋅ 0

DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

【前端Talkking】CSS系列——CSS深入理解之line-height

1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高的理解,今天发布出来,大家...

micstone ⋅ 06/08 ⋅ 0

16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto ⋅ 2017/12/19 ⋅ 0

CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000 ⋅ 2016/03/29 ⋅ 0

垂直居中的总结

无需固定高度的方式 用以下的方式,可以适应任何高度的div实现居中。 方式1:使用jquery.popup.js插件 本人封装了一个名为jquery.popup.js的插件,主要是为了弹窗实现居中显示问题,还不错的...

前端届的科比 ⋅ 2015/09/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim编辑模式、命令模式

编辑模式 vim要从一般模式进入编辑模式只要按字母 i 、I、a、A、o、O键就可以了 要从编辑模式回到一般模式按键盘上的Esc键即可。 按键 作用 i 在当前字符前插入 I 在光标所在行的行首插入 o ...

黄昏残影 ⋅ 30分钟前 ⋅ 0

OSChina 周五乱弹 —— 如果有一天不当程序员了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享off的单曲《我唱情歌给你听》 《我唱情歌给你听》- off 手机党少年们想听歌,请使劲儿戳(这里) @小小编辑 :#如果不做程序...

小小编辑 ⋅ 37分钟前 ⋅ 5

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

Java8新增的DateTimeFormatter与SimpleDateFormat的区别

两者最大的区别是,Java8的DateTimeFormatter也是线程安全的,而SimpleDateFormat并不是线程安全。 在并发环境下使用SimpleDateFormat 为了能够在多线程环境下使用SimpleDateFormat,有这三种...

人觉非常君 ⋅ 今天 ⋅ 0

多线程如何控制执行顺序

线程的生命周期说明: 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New)、就绪(Runnable)、运行(Running)、...

MarinJ_Shao ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Django第一期

安装Django 去https://www.djangoproject.com/download/ 下载最新版的Django,然后解压放到Anaconda\Lib\site-packages目录下,然后cmd进入此目录,输入安装命令: python setup.py install ...

大不了敲一辈子代码 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部