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. Python开发【第六篇】:面向对象

    configparser模块 configparser用于处理特定格式的文件,其本质是利用open来操作文件. 文件a.txt [section1] k1 = 123 k2:v2   [section ...

  2. [剑指Offer]5-替换空格

    链接 https://www.nowcoder.com/practice/9023a0c988684a53960365b889ceaf5e?tpId=13&tqId=11210&tPa ...

  3. 113. Path Sum II 输出每个具体路径

    [抄题]: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the gi ...

  4. [leetcode]84. Largest Rectangle in Histogram直方图中的最大矩形

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  5. PHP请求ws出现的问题

    在SOAPUI中的请求如下: <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/&qu ...

  6. ABP框架初始化数据(自定义)

    找到目录:AbpFramework.EntityFramework>Migrations>SeedData,这目录下创建类:DefaultDataCreator.cs using Syst ...

  7. gdb调试技巧 找到php执行进程当前执行的代码

    假设线上有一段php脚本,突然在某天出问题了,不处理但是进程没有退出.这种情况可能是异常休眠或者是有段死循环代码,但是我们怎么定位呢,我们这个时候最想知道的应该是这个脚本在此刻在做什么吧.这个是gdb ...

  8. typescript里面调用javasript

    index.html 里面加入函数: function tellYou() { egret.log("tell you."); javascript:android.funA(); ...

  9. python 06函数

    python中函数定义方法: def test(x): "The function definitions" x+=1 return x def:定义函数的关键字test:函数名( ...

  10. Call to undefined function Workerman\posix_getpid()

    安装扩展 yum install php-posix