☊ 【实现要求】:

<div class="demo1">
标题1111
</div>

√ 【实现】:

方案一:普通布局

.demo1 {
text-align: center; //水平居中
line-height: $height; //垂直居中
}

方案二flex 布局

.demo1 {
display: flex;
display: -webkit-flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}

方案三box 布局(2009年语法,flex 的前身)

.demo1 {
display: box;
display: -webkit-box;
-webkit-box-pack:center; //水平居中
-webkit-box-align:center; //垂直居中
}

CSS 实现:文字水平垂直居中的更多相关文章

  1. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  2. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  3. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  4. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  5. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  6. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  7. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  8. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  9. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  10. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

随机推荐

  1. Mysql执行Update操作时会锁住表

    update tableA a,(select a.netbar_id,sum(a.reward_amt) reward_amt from tableB a group by a.netbar_id) ...

  2. lucene字典实现原理——FST

    转自:http://www.cnblogs.com/LBSer/p/4119841.html 1 lucene字典 使用lucene进行查询不可避免都会使用到其提供的字典功能,即根据给定的term找到 ...

  3. linux 下echo命令写入文件内容

    http://blog.csdn.net/xukai871105/article/details/35834703 echo "Raspberry" > test.txt

  4. 项目中Enum枚举的使用

    在.NET中,枚举一般有两种常见用法,一是表示唯一的元素序列,比如表示订单状态(未提交,待处理,处理中...).另外一种是表示多种组合的状态,比如表示权限,因为可同时有多个不同权限. 基本用法 这里拿 ...

  5. [Js]跟随鼠标移动的div

    例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...

  6. 一模 (3) day1

    第一题: 题目大意:给出m个小于n的数,求出出现次数大于m div 2 的数. 1<=n<=2^31   1<=m<=10000 解题过程: 1.看到m的数据范围比较小,直接  ...

  7. 一模 (2) day2

    第一题: 题目大意:给出n种物品和每种物品的件数,求拿k件的方案数.N<=30 解题过程: 1.一开始总想着是组合数学的模型,结果怎么都想不出来..然后写了个爆搜,数据很弱,只有1个点超时. 2 ...

  8. Delphi out 参数 string Integer

    http://www.delphibasics.co.uk/RTL.asp?Name=Out http://stackoverflow.com/questions/14507310/whats-the ...

  9. LA 5061 LCA tarjan 算法

    题目大意: 给定所有点的权值都为0,给定一棵树以后,每次询问都要求给定两点 x , y 和一个权值w,要求x,y路径上所有点权值加上w,最后求出每一个节点的值 这里因为查询和点都特别多,所以希望能最后 ...

  10. exit(0)与exit(1)、return区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...