<div class="demo2">
<span>about me</span>
</div>

css

.demo2{
width: 200px;
height: 200px;
border:1px solid red;
position: relative;
}
.demo2 span{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%); }

原理:

定位span元素,left:50%; top:50%; 元素的参考点在元素的左上角,实现完全居中,需要再向上 向左移动元素高度 宽度的一半,使用transform:translate(-50%, -50%)实现;

translate 实现元素垂直居中的更多相关文章

  1. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  2. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. DIV元素垂直居中的分析与实现

    首先,对于需要垂直居中的元素常规居中处理 margin: 0 auto; 接下来要设置div的祖先元素的宽高为100%, 在默认的设置中他们都为0: html, body { width: %; he ...

  5. css点滴1—八种方式实现元素垂直居中

    这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...

  6. Css-浅谈如何将多个inline或inline-block元素垂直居中

                一直以来,前端开发过程中本人遇到最多,最烦的问题之一是元素如何垂直居中,发现开发过程中,元素的垂直居中一直是个很大的麻烦事,经常发现PC端和电脑模拟元素都垂直居中了,但是遇到移 ...

  7. HTML/CSS:div居中和div内部元素垂直居中(1)

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  8. CSS布局:元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

  9. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

随机推荐

  1. PAT 1062. 最简分数(20)

    一个分数一般写成两个整数相除的形式:N/M,其中M不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正分数 N1/M1 和 N2/M2,要求你按从小到大的顺序列出它们之间分母 ...

  2. Action三种编写方式

    1.     创建普通类不实现接口与继承类 2.     实现Action接口 3.     继承ActionSupport类(常用)

  3. mysql 导入数据是报错:2006 - MySQL server has gone away

    导SQL数据库结构+数据时,如果数据是批量插入的话会报错:2006 - MySQL server has gone away. 解决办法:找到你的mysql目录下的my.ini配置文件,加入以下代码 ...

  4. java线程 同步临界区:thinking in java4 21.3.5

    java线程 同步临界区:thinking in java4 21.3.5 thinking in java 4免费下载:http://download.csdn.net/detail/liangru ...

  5. Swift——(四)Swift中"#"的妙用

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/twlkyao/article/details/31350841     在Swift中," ...

  6. PAT 天梯赛 L2-005. 集合相似度 【SET】

    题目链接 https://www.patest.cn/contests/gplt/L2-005 思路 因为集合中的元素 是不重复的 所以用SET 来保存 集合 然后最后 查找一下 两个集合中共有元素 ...

  7. 20145229《Java程序设计》第四次实验报告

    Android开发基础 实验要求 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android组件.布局管理器的使用: 3.掌握Android中事件处理机制. ...

  8. 20145229吴姗珊《JAVA程序设计》第一周学习总结

    教材学习内容总结 第一章 JAVA 平台概论 1.JAVA不仅仅是一门程序设计语言,还是标准规范 2.1995年5月23日被公认为JAVA的诞生日 3.J2SE包含了JDK和JAVA程序语言 4.三大 ...

  9. 删除power by dedecms的方法

    在include/dedesql.class.php文件,会发现最新的include/dedesql.class.php文件会多出第588到第592行的那几段代码,代码如下图: $arrs1 = ar ...

  10. Ci下面隐藏index.php的方法

    1.需要apache打开rewrite_module,然后修改httpd.conf的AllowOverride none 为AllowOverride All(里面,不同的环境目录不同) 2.在CI的 ...