translate 实现元素垂直居中
<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 实现元素垂直居中的更多相关文章
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
- css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来), 不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...
- DIV元素垂直居中的分析与实现
首先,对于需要垂直居中的元素常规居中处理 margin: 0 auto; 接下来要设置div的祖先元素的宽高为100%, 在默认的设置中他们都为0: html, body { width: %; he ...
- css点滴1—八种方式实现元素垂直居中
这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...
- Css-浅谈如何将多个inline或inline-block元素垂直居中
一直以来,前端开发过程中本人遇到最多,最烦的问题之一是元素如何垂直居中,发现开发过程中,元素的垂直居中一直是个很大的麻烦事,经常发现PC端和电脑模拟元素都垂直居中了,但是遇到移 ...
- HTML/CSS:div居中和div内部元素垂直居中(1)
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- CSS布局:元素垂直居中
CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
随机推荐
- LookAndFeelInfo
在读zap源码的时候碰到:UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());以下来自百度知道UIManager.s ...
- centos install docker setup centos7 安装docker
centos7 安装docker 1: 安装必要的一些系统工具sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2: 添 ...
- anaconda + opencv3
直接运行 pip install opencv-python 或者 pip install opencv-contrib-python 参照如下网页 https://blog.csdn.net/sin ...
- python多版本管理
1.查看系统中的安装了那些python版本 2.查看系统中的alternatives命令是否安装 3.使用alternatives --install 接管python -install 选项使用了多 ...
- selenium鼠标悬停操作
有些网页一打开会有一个弹窗,弹窗不消失无法进行取元素操作,只有把鼠标悬停在上面弹窗才会消失,这时就用到了selenium的悬停操作 鼠标悬停 move_to_element() 定位到要悬停的元素 ...
- Gem简介
Rubyems:简称gems是一个用于对rails组建近些年个打包的ruby打包系统,它提供了一个分发ruby程序喝库的标准格式,还提供了一个管理程序包的工具.Rubyems的功能类似于linux下的 ...
- 队列(Queue)
队列(Queue) Queue: 先入先出(FIFO)的数据结构. offer,add区别: 一些队列有大小限制,因此如果想在一个满的队列中加入一个新项,多出的项就会被拒绝. 这时新的 offer 方 ...
- Elatsicsearch分片和副本相关知识
1.分片和副本 1.1什么是分片 简单来讲就是咱们在ES中所有数据的文件块,也是数据的最小单元块,整个ES集群的核心就是对所有分片的分布.索引.负载.路由等达到惊人的速度. 分片是把索引数据切分成多个 ...
- 第二篇、css尺寸和边框
一.尺寸和标签图 二.尺寸单位 %:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于 ...
- 如何阻止form表单中的button按钮提交
<form action="#" method="post"> <input type="text" name=" ...