关于一个div上下左右居中的css方法
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方法的更多相关文章
- 9.如何让一个div 上下左右居中?【CS
方法1:[绝对定位50%-本身50%] position:absolute; left:50%; top:50%; transform: tra ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- css div上下左右居中
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class= ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div上下左右居中方法
方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...
- div上下左右居中几种方式
1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...
- 单个div充满屏幕的CSS方法
1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...
- DIV 上下左右居中黑科技
<style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:# ...
随机推荐
- 二叉搜索树与双向链表(python)
题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. # -*- coding:utf-8 -*- # class TreeNo ...
- protobuf shutdownprotobuflibrary的时候crash,释放的指针出错
往往是多个子项目中有多次链接使用. 解决方法: 1. 使用静态库. 2. issure中有说2.6.1还未允许多次释放,建议使用3.4.x版本. 参考: https://github.com/prot ...
- java基础 ------- 多重循环 and break与continue
----- 什么是多重循环 ---- 打印数列 public class ForEx { public static void main(String[] args){ for(int i = ...
- SpringAOP日志配置
SpringAOP日志配置 配置文件配置 l 配置spring-mvc.xml <aop:config proxy-target-class="true" /> &l ...
- abp xunit Can not register IHostingEnvironment. It should be a non-abstract class. If not, it should be registered before.”
在测试项目的ServiceCollectionRegistrar类提前注册.
- Idea创建简单Java Web项目并部署Servlet
1.打开Idea,创建JAVA Web项目 在WEB-INF目录下创建classes和lib文件夹 配置编译输出路径为刚才新建的classes文件夹 配置依赖jar包加载路径 添加tomcat ser ...
- 文字创作类App分享-简书
今天我用Mockplus做了一套简书App的原型,这是一款文字创作类的App,用户通过写文.点赞等互动行为,提高自己在社区的影响力,打造个人品牌.我运用了Mockplus基础组件.交互组件.移动组件等 ...
- SLICK基础
1.sbt添加依赖 "com.typesafe.slick" %% "slick" % "3.2.3", "org.slf4j&q ...
- php memcache 基础操作
<?php/** * Memcache缓存操作 * @author hxm * @version 1.0 * @since 2015.05.04 */class MCache extends O ...
- vb WIN32 API获取syslistview行数
Private Declare Function FindWindow Lib "user32.dll" Alias "FindWindowA" (ByVal ...