#box{
width:200px;
height:200px;
line-height: 200px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 30px;
color: white;
text-align: center;
}

使用vertical-align属性来实现垂直居中

实例代码如下如下

<style type="text/css">
#box{
width:250px;
height:200px;
line-height: 200px;
vertical-align: middle;
background-color: #ffd200;
font-size: 30px;
color: white;
text-align: center;
}
</style>

效果如下

垂直居中

div容器中内容垂直居中的更多相关文章

  1. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  2. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  3. 定时脚本删除docker容器中内容

    今天在我同步mongo数据库的时候,服务器的磁盘突然就被占满了导致同步中断,mongo容器也停止工作了.然后就想要弄一个能够定时清理同步过程中留存在docker容器中的mongo数据的脚本.话不多说, ...

  4. 让字体在div容器中垂直居中

    1. 只显示一行数据的话: 给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden .test{ height:40px; line-height:40 ...

  5. 实现div里的内容垂直居中

    ---恢复内容开始--- 在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法: 1.使用absolute,top:50%,transf ...

  6. css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)

    容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...

  7. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  8. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  9. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

随机推荐

  1. Laravel传值总结

    Laravel传值:with,view(),compact方法一:with public function index() { $title = '文章标题1'; return view('artic ...

  2. js并归排序的思路

    并归排序,就是分而治之,将长的数组分解为短的数组,一直分到最后,单个单个数组,我们就认为,只有一个元素的数组是有序的.然后再逐个的合并 1.拆分: 很容易 例如数组  [ 2,4,3,5,1,6,8, ...

  3. JAVA编程思想学习笔记7-chap19-21-斗之气7段

    1.枚举 2.内置三种注解 @Override @Deprecated @SuppressWarnings 3.元注解:用于注解其它注解 4.注解处理器:通过反射 5.创建线程的两种方式 实现Runn ...

  4. HDU 4565 So Easy(矩阵解公式)

    So Easy [题目链接]So Easy [题目类型]矩阵解公式 &题解: 感觉这种类型的题都是一个套路,这题和hdu 2256就几乎是一样的. 所以最后2Xn就是答案 [时间复杂度]\(O ...

  5. python入门第一篇

    python里面 单行注释用:#被注释内容 多行注释用:"""被注释内容""" 要想py2.7和py3.5都能运行,必须在文件头部加: #/ ...

  6. caffe中通过prototxt文件查看神经网络模型结构的方法

    在修改propotxt之前我们可以对之前的网络结构进行一个直观的认识: 可以使用http://ethereon.github.io/netscope/#/editor 这个网址. 将propotxt文 ...

  7. Other Problems

    http://www.cnblogs.com/coder211/p/7919749.html http://blog.jobbole.com/17763/http://www.open-open.co ...

  8. 《大话设计模式》c++实现 工厂模式

    工厂模式 工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端 ...

  9. JS中常用的输出方式(五种)

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  10. mysql的指令

    mysql有一下几方面的特性: 1:多语言支持 2:可以移植性好 3:免费开源 4:高效(支持多线程,充分利用cpu资源,运行速度非常) 5:支持大量数据查询和储存 6:操作简单易于学习 其实数据库就 ...