通常在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. python画图—黑板客老师课程学习

    1.介绍 把每个图都看作一个对象,图中的每一个部分也是对象.——所有的一切都是对象. 工具——ipython notebook 是python里边用的最多的2D&3D的会图库,开源免费库,使用 ...

  2. hg常用命令

    关于hg命令选项 如果你是在windows系统下,使用的是图像界面,你很可能不常用它.但是一旦你了解这些命令之后,会觉得很方便.hg有很多命令,这些命令都有一定的选项,在开始的时候,只知道用它,有时候 ...

  3. YII2学习第一天

    YII2学习第一天,之前稍微看了看TP,感觉和自己的理念不是很符合,然后转学YII2了. 使用的文档是https://github.com/yiisoft/yii2/tree/master/docs/ ...

  4. [知识整理]Java集合（一） - List

    一.实现List的几个类: ArrayList.LinkedList.CopyOnWriteArrayList.Vector 二.几个List底层的数据结构: ArrayList - 数组列表 Lin ...

  5. swt controls里的控件list

    swt controls里的控件list,怎么显示滚动条,并且滚动条自动移动到最下边时,显示最新内容 package com.jokul; import org.eclipse.swt.widgets ...

  6. array_filter,匿名函数

    static function get_categoryII() { return array( array('id' => 1, 'c1id' => 1, 'name' => '1 ...

  7. Shell 去掉文本中的空格

    使用sed命令 将文件'aol1'中的空格去掉然后输出到'tmpFile'文件中 sed s/[[:space:]]//g aol1 > tmpFile

  8. 使用dd命令克隆整个系统(转)

    神奇的ghost的原理是什么呢?不就是数据复制吗?Linux下的dd命令不就是最强大的数据复制工具!          既然如此,我为什么要使用g4l这样复杂的工具呢?一条dd命令不就可以帮我实现任意 ...

  9. 利用 PortableBasemapServer 发布地图服务

    前段时间需要给自己的C/S系统加一个地图,但是没有数据,于是就想到了使用网上的切片地图,但是C/S系统又不能联网,于是就想本地发布切片服务来使用. 本来想用ArcGIS Server来发布从网上下载的 ...

  10. CUDA代码的高亮设置

    以下基于"WIN7(64位)+Visual Studio 2010+CUDA7.5". 语法高亮除了看起来舒服之外,还可以使用F11寻找函数.变量定义,输入函数的时候也会有相应的提 ...