CSS 实现:文字水平垂直居中

时间:2021-12-29 07:05:58

☊ 【实现要求】:

CSS 实现:文字水平垂直居中

<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进阶&lpar;二十二&rpar;设置TextView文字水平垂直居中

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. CSS&lpar;3&rpar;实现水平垂直居中效果

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

  10. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

随机推荐

  1. Android之界面刷新&lpar;invalidate和postInvalidate使用&rpar;

    Android中实现view的更新有两组方法,一组是invalidate,另一组是postInvalidate,其中前者是在UI线程自身中使用,而后者在非UI线程中使用. Android提供了Inva ...

  2. Sublime Text 3 安装及简单配置

    Sublime Text 3, 一款不错的文本编辑器, 加上各种插件和IDE就能化身各种语言的编译器, 界面以及多种插件的灵活组合搭配更是让程序员们在码代码这种枯燥的生活中增加一点调剂. 下载地址 点 ...

  3. C&plus;&plus;判断Office版本——转载

    自:http://blog.csdn.net/lpc_china/article/details/18359145 主要原理:查询windows注册表microsoft office软件项的值来判断版 ...

  4. 【TEGer 在全球架构师峰会】 &colon; 腾讯海外计费系统架构演进

    欢迎大家前往云加社区,获取更多腾讯海量技术实践干货哦~ 作者简介:abllen,2008年加入腾讯,一直专注于腾讯计费平台建设,主导参与了腾讯充值中心.计费开放平台.统一计费米大师等项目,见证了米大师 ...

  5. java 并发多线程 锁的分类概念介绍 多线程下篇(二)

    接下来对锁的概念再次进行深入的介绍 之前反复的提到锁,通常的理解就是,锁---互斥---同步---阻塞 其实这是常用的独占锁(排它锁)的概念,也是一种简单粗暴的解决方案 抗战电影中,经常出现为了阻止日 ...

  6. Python设计模式 - 基础 - 七大基本原则

    提倡使用设计模式,主要出发点就是实现代码复用,增加代码的扩展性和可维护性.如何设计出简洁.易懂.灵活.优美的代码结构的确是一门学问,透彻理解并践行如下七大原则通常都能取得基本满意的结果: - 单一职责 ...

  7. MYSQL导入数据时&comma;出现错误&colon;Incorrect string value&colon; &&num;39&semi;&bsol;xF0&bsol;x9F&period;&period;&period;&&num;39&semi; for column &&num;39&semi;XXX&&num;39&semi; at row 1

    Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1 这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表 ...

  8. Git命令cherry-pick,选择把一部分代码提交到另一个分支

    由于对git的使用还不是很熟悉,只是会基本的添加.提交.分支相关简单操作,在开发新需求的时候,需要涉及两个项目,一部分在新项目的新分支上开发的,另一部分是在老项目的老分支上开发的(这里忘了创建新分支) ...

  9. 安装tensorflow ubuntu18&period;04

    1.首先安装环境是ubuntu18.04. $sudo apt-get install python-pip python-dev python-virtualenv2.安装virtualenv虚拟环 ...

  10. &lbrack;知乎&rsqb;关于WindowsXPx64SP2系统的说明

    自己简单安装了下发现 winxpsp3x86的系统版本为: 然后windowsXPx64sp2的版本为:   作者:qpi667链接:https://www.zhihu.com/question/29 ...