#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. arcgis api for flex 开发入门

    参考:http://blog.sina.com.cn/s/articlelist_2346836525_1_1.html 参考教程:https://www.jb51.net/books/81280.h ...

  2. yield和send函数

    yield作用类似于return,其本质是一个迭代器. 当程序执行到yield时,会结束本次循环,返回一个值,然后内置含有next()函数, 下次在执行时,会从yield结束的地方继续执行. 带yie ...

  3. EF或LINQ 查询时使用IN并且根据列表自定义排序方法

    EF和LINQ改变了原有的手写SQL时期的一些编码方法,并且增强了各数据库之间的移植性简化了开发时的代码量和难度,由于很多人不熟,经常会碰到一些写SQL语句时经常会用到的一些方法,而使用EF或LINQ ...

  4. Mongodb 文档时间字段修改

    mongo文档[tblEvent]如下: {     "_id" : ObjectId("5a0415f9bf28b684b1c7f5b2"),     &qu ...

  5. c#之根据出生日期获得星座信息

    星座定义如下: 代码如下: public enum Constellation { Aquarius = , // 水瓶座 1.20 - 2.18 Pisces = , // 双鱼座 2.19 - 3 ...

  6. SVN—使用总结

    SVN使用教程总结 为什么要使用SVN? 在程序的编写过程中,每个程序员都会负责开发一个或多个模块,且开发中会生成很多不同的版本, 这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版 ...

  7. Beta阶段冲刺2.0

    1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 "我的活动详情&quo ...

  8. CSS radial-gradient() 函数实现渐变

    值 描述 shape 确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变. circle :指定圆形的径向渐变 size 定义渐变的大小,可能值: farthest-corner (默认 ...

  9. ArrayList与List性能测试

    理论:由于ArrayList存储数据存在装箱(读取数据存在拆箱),而泛型List<T>直接对T类型数据进行存储,不存在装箱与拆箱拆箱操作,理论上速度应该快一些. 废话少说,上代码. pub ...

  10. Yii Restful api自定义字段