1:通过position:absolute定位,上下左右的值都设为0,margin:auto;需要知道div的宽高

{
width: 64px;
height: 64px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高度的一般即可实现;

{

width: 64px;
height: 64px;
border: 1px solid red;
background-image: url(img/g2.gif);
background-size:100% 100% ;
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;

}

3 未知div的宽高。由div的内容撑起来

{

border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

关于一个div上下左右居中的css方法的更多相关文章

  1. 9.如何让一个div 上下左右居中?【CS

      方法1:[绝对定位50%-本身50%]              position:absolute; left:50%; top:50%;              transform: tra ...

  2. css:子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  3. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class= ...

  4. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  5. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  6. div上下左右居中方法

    方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...

  7. div上下左右居中几种方式

    1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...

  8. 单个div充满屏幕的CSS方法

    1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...

  9. DIV 上下左右居中黑科技

    <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:# ...

随机推荐

  1. Linux云服务器

    1. 第一步:前往阿里云官网注册账号,实名认证.进去云服务器,创建实例! 第二步:选配置,**公网IP地址选择“分配”!**如果你是首次购买主机,安全组先不必勾选,或者勾选默认的 .后面,会有安全组的 ...

  2. mybatis中查询使用#{}和${}的区别

    ${}中的变量什么值,就会简单的替代变量,不会做处理 比如delete * from tb_label where name=${labelname} 如果labelname的值是 something ...

  3. mysql 报错You can't specify target table 'wms_cabinet_form' for update in FROM clause

    这个错误是说从t表select出来的无法又更新t表. 可以在select的时候先取个别名,弄个临时表即可.

  4. xmlhttprequest 1.0和2.0的区别,from qq前端哥

    阮一峰好文:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

  5. 105. Construct Binary Tree from Preorder and Inorder Traversal根据前中序数组恢复出原来的树

    [抄题]: Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume ...

  6. 容器101:Docker基础

    Docker如此受欢迎的一个原因是它提供了“一次开发,随处运行”的承诺.Docker提供了一种将应用程序及其运行时依赖性打包到单个容器中的简单方法.它还提供了一个运行时抽象,使容器能够跨不同版本的Li ...

  7. [leetcode]28. Implement strStr()实现strStr()

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...

  8. Spring遇到的问题合集

    2018-09-15 元素 "tx:annotation-driven" 的前缀 "tx" 未绑定. 后来我加了 http://www.springframew ...

  9. android studio 将自己的项目生成jar包

    很多情况下我们开发的项目不是一个完整的app,而是完成一部分功能,供别人的app使用的情况.这时就需要将我们的项目打包生成jar或者arr库文件,让别人的app导入我们的jar包,就能直接使用我们项目 ...

  10. mark 三年工作总结

    在新公司加班,正在看<HBase 权威指南>,看Michael Stack为本书写的序,介绍HBase最初的发展,Lars在HBase 使用和推广做出的贡献. 突然想到,我还有一篇工作三年 ...