<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. The Princess and the Pea,摘自iOS应用Snow White and more stories

    Once upon a time there was a prince who wanted to marry a real princess.从前,有个王子想和真正的公主结婚. He looked ...

  2. PHP安全编程之php.ini配置

    1.register_globals=On <?php//ex1.php  if(check_admin())  {  $is_admin=true;  }  if($is_admin)  {  ...

  3. 在VS2010下打开VS2008项目的解决办法

    如何在vs2010中打开vs2008项目文件? 第一步:以记事本方式打开该项目的sln解决方案,找到这两行信息,分别如下:Microsoft Visual Studio Solution File,  ...

  4. linux基础part1

    linux基础部分一 一.linux简介 1.Linux的定义:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. ...

  5. 通过systemd配置Docker

    1. systemd Service相关目录 通常情况下,我们有3种方式可以配置etcd中的service.以docker为例,1)在目录/etc/systemd/system/docker.serv ...

  6. MYSQL:基础——事务处理

    MYSQL:基础——事务处理 事物处理 1.什么是事物处理 事务处理(transaction processing)可以用来维护数据库的完整性,它保证成批的MySQL操作要么完全执行,要么完全不执行 ...

  7. 工作中你肯定会有关于 Yii2 的小贴士用法,在下面评论分享出来吧。

    场景: 数据库有user表有个avatar_path字段用来保存用户头像路径 需求: 头像url需要通过域名http://b.com/作为基本url 目标: 提高代码复用 此处http://b.com ...

  8. golang 获取指定目录下的子文件列表

    GO语言按照深度遍历文件 原创 2016年07月20日 09:45:19 标签: go语言 / 遍历 / string 1971 常规方法不使用pathfilepath包 go的filepath包 g ...

  9. 《程序员代码面试指南》第一章 栈和队列 设计一个有getMin功能的栈

    题目 实现一个特殊的栈,在实现栈的基本功能上,再实现返回栈中最小的元素的操作 要求 1. pop.push.getMin操作时间复杂度都是O(1) 2. 设计的栈类型可以使用现成的栈结构 java代码 ...

  10. 《程序员代码面试指南》第五章 字符串问题 去掉字符串中连续出现k 个0 的子串

    题目 去掉字符串中连续出现k 个0 的子串 java代码 package com.lizhouwei.chapter5; /** * @Description: 去掉字符串中连续出现k 个0 的子串 ...