通常在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让元素居中显示的更多相关文章

  1. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  2. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  3. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  4. css实现元素居中

     参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...

  5. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  6. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  7. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

  9. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 02.Sencha ExtJS 6 - What is Viewport?

    什么是Viewport? Viewport (Ext.container.Viewport)是一个专门的容器用于可视应用领域(浏览器窗口).Viewport渲染自身到网页的documet body区域 ...

  2. django框架的models

    在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...

  3. Python2.7如何安装numhttp://www.cnblogs.com/yuanzm/p/4089856.htmlpy

    numpy是python一个函数库,做数据挖掘是很好的.但是一般是不带这个函数库的,所以接下来我要讲下如何安装这个函数库, 首先有一种方法是: 傻瓜式安装法:https://sourceforge.n ...

  4. [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...

  5. 不谈业务运维的IT主管早晚被淘汰 这里是10条干货

    大数网 吴玉征 先说个真实的故事. 前一段时间,有一家知名的国际连锁咖啡公司的自助交易系统(支付宝.微信.ApplePAY)特别慢,工作人员也不知道为什么.由于他们刚上了业务运维,支持这套系统的云智慧 ...

  6. 特殊字符(包含emoji)的梳理

    背景知识 emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建的,词义来自日语(えもじ,e-moji,moji在日语中的含义是字符).emoji可 ...

  7. 通过XmlHttpRequest实现带进度条异步下载文件

    本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善: 本代码仅做技术展现,请勿探讨 ...

  8. Java基础知识系列——目录操作

    Java对目录操作的许多方法与上一篇文件操作的方法很多是一样的. java.io.File file = new File( "D:\1\2\3\4"); 1.递归创建目录 fil ...

  9. JS--垒房子

    垒房子的小游戏,还没加上得分选项,这是自己的练习笔记,留作笔记随时查看. <!DOCTYPE html><html>    <head>        <me ...

  10. Python之字符串小代码解析

    本篇只是拿一段代码来对python中的字符串的一些使用做解释,来让大家更加了解python Python 3.4.0 (v3.4.0:04f714765c13, Mar 16 2014, 19:25: ...