☊ 【实现要求】:

<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. h5 本地存储和读取信息

    总结:cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)对于购物网站而言,cookie是非常重要的,为了实现购物车功能,把已选物品加入 ...

  2. Octopus系列之开发过程各个技术点

    自定义了页面周期 使用唯一的一个VelocityEngine全局的静态实例,优化了小泥鳅blog中每次请求都要创建VelocityEngine实例对象,减少了对象的开销 通过UA判断请求来自的设备,从 ...

  3. mark 一下

    Android资源管理框架(Asset Manager)简要介绍和学习计划 http://www.cnblogs.com/hjtdlx/p/4332060.html

  4. 转载——PLSQL developer 连接不上64位Oracle 解决办法

    前两天刚下载了oracle 11g 64位的最新版本,安装成功之后,再安装PLSQL.结果使用PLSQL访问数据库时,死活连接不上.报错如下: Could not load "……\bin\ ...

  5. hdu 1035 (usage of sentinel, proper utilization of switch and goto to make code neat) 分类: hdoj 2015-06-16 12:33 28人阅读 评论(0) 收藏

    as Scott Meyers said in his book Effective STL, "My advice on choosing among the sorting algori ...

  6. iOS开发XCODE5 SVN配置 使用办法

    第一次弄svn版本控制,折腾了好久一直都出错!无意间看到一篇文章!貌似解决了,很感谢“代码妖娆” 的详细流程(http://blog.sina.com.cn/s/blog_68661bd80101ph ...

  7. 理解smart pointer之三:unique_ptr

    unique_ptr最先在boost中被定义,后来被C++标准委员会选中为C++11的feature之一. std::unique_ptr is a smart pointer that retain ...

  8. poj3280 区间dp

    //Accepted 15880 KB 250 ms #include <cstdio> #include <cstring> #include <iostream> ...

  9. HDU 1045 - Fire Net (最大独立集)

    题意:给你一个正方形棋盘.每个棋子可以直线攻击,除非隔着石头.现在要求所有棋子都不互相攻击,问最多可以放多少个棋子. 这个题可以用搜索来做.每个棋子考虑放与不放两种情况,然后再判断是否能互相攻击来剪枝 ...

  10. alpha,hidden,opaque的一些认识

    如果opaque设置为YES,那么视图会被当做全视图来对待,系统会重绘整个视图 如果opaque设置为NO,那么系统会减少开销,以其中的内容来判定重绘的视图 如果把视图的背景色设置为透明那个,那么op ...