css让元素居中显示
通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和
margin-left:-[元素宽度的一半] , 但是当我们的元素宽高不是固定的时候, 这就难办了,
还好css3里面的translate给了我们很大的方便呀2333
html file:
<body>
<div class='parentelement'>
<div class='childelement'>
想让子元素在父元素内水平、垂直居中
</div>
</div>
</body>
css file:
.parentelement{
width:200px;
height:200px;
background-color:red;
position:relative;
}
.childelement{
width:50%;
height:50%;
background-color:green;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
css让元素居中显示的更多相关文章
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css 使元素居中
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...
- css实现元素居中
参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- 02.Sencha ExtJS 6 - What is Viewport?
什么是Viewport? Viewport (Ext.container.Viewport)是一个专门的容器用于可视应用领域(浏览器窗口).Viewport渲染自身到网页的documet body区域 ...
- django框架的models
在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...
- Python2.7如何安装numhttp://www.cnblogs.com/yuanzm/p/4089856.htmlpy
numpy是python一个函数库,做数据挖掘是很好的.但是一般是不带这个函数库的,所以接下来我要讲下如何安装这个函数库, 首先有一种方法是: 傻瓜式安装法:https://sourceforge.n ...
- [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布
基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...
- 不谈业务运维的IT主管早晚被淘汰 这里是10条干货
大数网 吴玉征 先说个真实的故事. 前一段时间,有一家知名的国际连锁咖啡公司的自助交易系统(支付宝.微信.ApplePAY)特别慢,工作人员也不知道为什么.由于他们刚上了业务运维,支持这套系统的云智慧 ...
- 特殊字符(包含emoji)的梳理
背景知识 emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建的,词义来自日语(えもじ,e-moji,moji在日语中的含义是字符).emoji可 ...
- 通过XmlHttpRequest实现带进度条异步下载文件
本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善: 本代码仅做技术展现,请勿探讨 ...
- Java基础知识系列——目录操作
Java对目录操作的许多方法与上一篇文件操作的方法很多是一样的. java.io.File file = new File( "D:\1\2\3\4"); 1.递归创建目录 fil ...
- JS--垒房子
垒房子的小游戏,还没加上得分选项,这是自己的练习笔记,留作笔记随时查看. <!DOCTYPE html><html> <head> <me ...
- Python之字符串小代码解析
本篇只是拿一段代码来对python中的字符串的一些使用做解释,来让大家更加了解python Python 3.4.0 (v3.4.0:04f714765c13, Mar 16 2014, 19:25: ...