一、单行文本居中

.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. 【Linux】- Ubuntu安装nginx

    安装 执行命令: sudo apt-get install nginx 执行如图: 防火墙设置 查看防火墙状态: sudo ufw status 查看可以穿过防火墙的应用列表: sudo ufw ap ...

  2. using指令含义

    using指令作用: 就是导入命名空间,这样你比如用StringBuilder类,就不用System.Text.StringBuilder builder = new System.Text.Stri ...

  3. 第64天:CSS常用命名规范,有用!

    CSS常用命名,必须记住 一.常用命名 标题:title 摘要:summary 箭头:arrow 商标:label 网站标志:logo 转角/圆角:corner 横幅广告:banner 子菜单:sub ...

  4. 第29天:js-数组添加删除、数组和字符串相互转换

    一.添加数组var arr=[1,3,5];arr.push(7,9);//添加7和9到数组arr后面,得到[1,3,5,7,9]1.push();可向数组末尾添加一个或多个元素,并返回新的长度.2. ...

  5. WPF DataGrid的使用

    构造数据: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...

  6. Hessian矩阵【转】

    http://blog.sina.com.cn/s/blog_7e1ecaf30100wgfw.html 在数学中,海塞矩阵是一个自变量为向量的实值函数的二阶偏导数组成的方块矩阵,一元函数就是二阶导, ...

  7. 【bzoj3754】Tree之最小方差树 最小生成树

    题目描述 给出一张无向图,求它的一棵生成树,使得选出的所有边的方差最小.输出这个最小方差. 输入 第一行两个正整数N,M 接下来M行,每行三个正整数Ui,Vi,Ci N<=100,M<=2 ...

  8. 【刷题】HDU 4405 Aeroplane chess

    Problem Description Hzz loves aeroplane chess very much. The chess map contains N+1 grids labeled fr ...

  9. 放弃采用Mycat的条件

    Mycat::一个新颖的数据库中间件产品 设计使用Mycat时: 满足以下任意一条,请考虑放弃使用MyCat 有非分片字段查询 有分页排序 进行表JOIN操作,除非要确保两个表的关联字段具有相同的数据 ...

  10. codeforces的dp专题

    1.(467C)http://codeforces.com/problemset/problem/467/C 题意:有一个长为n的序列,选取k个长度为m的子序列(子序列中不能有位置重复),求所取的k个 ...