一、单行文本居中

.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. DVD与CD区别

    经常听朋友说什么DVD什么CD什么的,不知道到底有什么区别,专门百度找了下,找到以下资料 ======================================================= ...

  2. Windows2008安装启用无线网卡

    昨天给本子换了系统来着,本来想法是好的,想在本子上安装Hyper-v来搭建多平台VPS,这样的话就能玩多个系统了,对于我自己来说对娱乐没啥兴趣,扯多了,正文 笔记本安装什么都很顺利,但是无线网卡把我难 ...

  3. php裁剪图片(支持定点裁剪)

    /** * 图片裁剪函数,支持指定定点裁剪和方位裁剪两种裁剪模式 * @param <string> $src_file 原图片路径 * @param <int> $new_w ...

  4. 刚装的vs无法运行正确的程序

  5. shmem:

    在/proc/meminfo中发现,cached不等于ActiveFile + InActiveFile,我们来看看cache到底都包括啥内存 1)首先肯定包含activeFile 和 inactiv ...

  6. 显示系统中所有的socket信息

    netstat -aon /proc/net/tcp /proc/net/udp /proc/net/unix 相关的代码是:tcp4_seq_show(struct seq_file *file, ...

  7. keyboard shortcuts & Xcode 10

    keyboard shortcuts & Xcode 10 Xcode Keyboard Shortcuts https://swifteducation.github.io/assets/p ...

  8. TDDL剖析

    前言 在开始讲解淘宝的TDDL(Taobao Distribute Data Layer)技术之前,请允许笔者先吐槽一番.首先要开喷的是淘宝的社区支持做的无比的烂,TaoCode开源社区上面,几乎从来 ...

  9. Python 文件对象和方法

    Python文件对象和方法 1.打开和关闭文件 Python提供了必要的函数和方法进行默认情况下的文件基本操作,我们可以用file对象做大部分文件操作. open()方法 我们必须先用Python内置 ...

  10. [bzoj4391] [Usaco2015 dec]High Card Low Card 贪心 线段树

    ---题面--- 题解: 观察到以决策点为分界线,以点数大的赢为比较方式的游戏都是它的前缀,反之以点数小的赢为比较方式的都是它的后缀,也就是答案是由两段答案拼凑起来的. 如果不考虑判断胜负的条件的变化 ...