一、单行文本居中

.content{
height:100px;
line-height:100px;
text-align:center;
border:1px solid red;
}

效果图

二、多行文本垂直水平居中

.wrap{
background:green;
width:100%;
display:table;
height:100px;
overflow:hidden;
} .content{
border:1px solid red;
display:table-cell;
width:550px;
vertical-align:middle;
text-align: center;
}

  

效果图

css文本垂直水平居中的更多相关文章

  1. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  2. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  3. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  4. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  5. CSS实现垂直水平居中

    HTML结构: <div class="wrapper"> <div class="content"></div> < ...

  6. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  7. CSS布局--垂直水平居中

    ···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...

  8. CSS - flex 垂直水平居中

    display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */

  9. css实现垂直水平居中的方法

    html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...

随机推荐

  1. 修改QQ各版本的默认保存位置(聊天记录)

    这几天没少折腾windows,都有点烦了,我是那种有强迫症的,只要知道的自己没有做到的会感觉到浑身不爽的因为系统重装了好几次,QQ也没少安装几次,我使用的是TM的QQ(没有 那么多烦人的广告,娱乐组件 ...

  2. C#Color颜色表

    Color.AliceBlue 240,248,255 Color.LightSalmon 255,160,122 Color.AntiqueWhite 250,235,215 Color.Light ...

  3. 苹果IOS、安卓推送功能开发

    IOS推送开发:以下是基于开源javapns推送开发1.DerInputStream.getLength(): lengthTag=111, too big.先排除是否由于打包时证书 .p12 文件被 ...

  4. springboot2.0 快速集成kafka

    一.kafka搭建 参照<kafka搭建笔记> 二.版本 springboot版本 <parent> <groupId>org.springframework.bo ...

  5. 【神仙题】【P1600】【NOIP2016D1T2】天天爱跑步

    传送门 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游 ...

  6. jq的$.each遍历数组

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 仅此一文让你明白ASP.NET MVC 之View的显示

    有些人要问题,为什么我要学框架?这里我简单说一下,深入理解一个框架,给你带来最直接的好处: 使用框架时,遇到问题可以快速定位,并知道如何解决: 当框架中有些功能用着不爽时,你可以自由扩展,实现你想要的 ...

  8. java 在centos6.5+eclipse环境下调用opencv实现sift算法

    java 在centos6.5+eclipse环境下调用opencv实现sift算法,代码如下: import org.opencv.core.Core; import org.opencv.core ...

  9. 如何让浏览器在访问链接时不要带上referer

    function open_without_referrer(link){ document.body.appendChild(document.createElement('iframe')).sr ...

  10. Balanced Sequence(毒瘤啊)排序贪心 HDU多校

    Problem Description Chiaki has n strings s1,s2,…,sn consisting of '(' and ')'. A string of this type ...