通常在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. VC++ 如何让ScrollView视图显示滚动条

    CSize sizeTotal; sizeTotal.cx = ;//值设大点 sizeTotal.cy = ;//值设大点 SetScrollSizes(MM_TEXT, sizeTotal); 显 ...

  2. unity中三种调用其他脚本函数的方法

    第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名()第二种,GameObject.Find("脚本所在的物体的名字").SendMessage(" ...

  3. shell 统计某个文件的行数命令

    语法:wc [选项] 文件- 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

  4. Ubuntu 14.04 英文系统 安装中文搜狗输入法

    ubuntu默认的输入法是ibus框架,而搜狗输入法是基于fcitx的框架,因此需要先安装fcitx框架. STEP1: 在Ubuntu Software Center 搜索fcitx,安装fcitx ...

  5. C. Shaass and Lights 组合数学

    http://codeforces.com/contest/294/problem/C 把那个数组n分段了,那么有两类. 1.开头和端点那些,就是只有一端在开始的,这个时候,要开完这些灯,只能循序渐进 ...

  6. poj 1384 Piggy-Bank（完全背包）

    Piggy-Bank Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10830   Accepted: 5275 Descr ...

  7. Finder Item脚本如何包装成 Mac App

    第一步,包装 记得之前把一个 java 程序的 jar 包 用 automator包装成了 app, 但自己找不到做法了.回头我想了想 这么实验可行. 这样做成 app 后保存在 /Applicati ...

  8. 总结A*，Dijkstra，广度优先搜索，深度优先搜索的复杂度比较

    广度优先搜索(BFS) 1.将头结点放入队列Q中 2.while Q!=空 u出队 遍历u的邻接表中的每个节点v 将v插入队列中 当使用无向图的邻接表时,复杂度为O(V^2) 当使用有向图的邻接表时, ...

  9. vertical-align 垂直居中

    基线:字母‘x’的底部: 中线:与基线的距离为小写字母x高度的一半(即0.5ex),而ex同font-size相关,大部分浏览器认为1ex = 0.5em(em同样也是相对单位,不是绝对单位),因此会 ...

  10. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...