通常在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. 15.6.6 Configuring Thread Concurrency for InnoDB

    innodb_thread_concurrency 设置inndb线程个数,如果超过则休眠一段时间,时间根据 innodb_thread_sleep_delay 单位为微妙,然后放进队列. innod ...

  2. extjs ajax java简单精美验证码实现 有图

    前端:利用ExtJs的autoEl功能加载图片. var imgCheckValid = new Ext.create('Ext.Component',{ width: 70, //图片宽度 heig ...

  3. mybatis, spring, springmvc

    mybatis配置: mybatis-config.xml <configuration> <!-- 作者MyBatis博客: http://legend2011.blog.51ct ...

  4. Android Dex文件格式(二)

    第三块: 数据区         索引区中的最终数据偏移以及文件头中描述的map_off偏移都指向数据区, 还包括了即将要解析的class_def_item, 这个结构非常重要,下面就开始解析   c ...

  5. java工程笔记

    start.sh #TITLE=jetty DEPLOY_PATH=$(cd $()/../ && pwd) export DEPLOY_PATH CLASSPATH=${CLASSP ...

  6. poj 1276 Cash Machine（多重背包）

    Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 33444   Accepted: 12106 De ...

  7. 用CSS3在手机上写弹出框，遮盖层

    html: 在页面头部要写 <title>网上预约</title> <link href="../App_Themes/default/css/header.c ...

  8. nginx php rewrite配置

    server { listen 80; server_name xxx.cn www.xxx.cn; index index.html index.htm index.php; root /data/ ...

  9. 如何用java获得字符串的ASCII值

    使用Integer.valueOf就可以直接将char类型的数据转为十进制数据表现形式. int value=Integer.valueOf('1');//49int value=Integer.va ...

  10. [z]START WITH CONNECT BY PRIOR子句实现递归查询

    [z]http://jingyan.baidu.com/article/5d368d1e182bb93f60c05784.html START WITH CONNECT BY PRIOR这个语法主要用 ...