☊ 【实现要求】:

<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. BZOJ3206 [Apio2013]道路费用

    首先我们强制要求几条待定价的边在MST中,建出MST 我们发现这个MST中原来的边是一定要被选上的,所以可以把点缩起来,搞成一棵只有$K$个点的树 然后$2^K$枚举每条边在不在最终的MST中,让在最 ...

  2. tds 安装找不到已安装的DB2

    应该是没有安装ksh的问题,yum install ksh

  3. 编程思考 PetShop读后感

    标准,插拔式的设计思想建立一致的标准是通向“复用”的通道.分层,使其得到的充分的独立.一个东西如果独立了[不是孤立],这个事物就具有很强大的力量,这个和一个人的成长是相同的道理.所以呢,在写程序的过程 ...

  4. PHP FTP操作类( 上传、拷贝、移动、删除文件/创建目录 )

    /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) * 时间:2006/5/9 * 作者:欣然随风 * QQ:276624915 */ class class_ftp { publi ...

  5. xampp搭建服务器环境、html5新的input类型

    怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...

  6. list集合的遍历3种方法

    package com.sort; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** ...

  7. winform插入sql的事务处理

    实现目的:点击按钮,原子性执行两条sql语句,同时成功或同时失败 数据库有这三个字段(忽略已有的一条记录): 一.用事务的sql语句 按钮事件完整代码: //事务处理插入sql语句 using (SQ ...

  8. DataGridView复选框实现单选功能(二)

    双击DataGridView进入事件 private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventA ...

  9. 数据结构-AVL树

    实现: #ifndef AVL_TREE_H #define AVL_TREE_H #include "dsexceptions.h" #include <iostream& ...

  10. AFNETWorking3.x实战教程

    上一篇文章介绍了优秀的第三方网络请求框架AFNETWorking2.0,本篇就通过一个实战例子来总结AFNetworking的使用. 本文参考http://www.raywenderlich.com/ ...