关于一个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:# ...
随机推荐
- c++ 中的智能指针实现
摘要:C++11 中新增加了智能指针来预防内存泄漏的问题,在 share_ptr 中主要是通过“引用计数机制”来实现的.我们今天也来自己实现一个简单的智能指针: // smartPointer.cpp ...
- VUE项目小试牛刀
首先安装webstorm:http://www.jetbrains.com/webstorm/ (推荐) 再安装node.js:https://nodejs.org/en/download/ (必 ...
- 298. Binary Tree Longest Consecutive Sequence最长连续序列
[抄题]: Given a binary tree, find the length of the longest consecutive sequence path. The path refers ...
- [leetcode]42. Trapping Rain Water雨水积水问题
Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
- Agile PLM 开发中AgileAPI类型对应控制台分类说明
1) 分类中的一级大类PLM后台管理的控制台中,每个分类中的一级大类都对应AgileAPI中一个类型 IServiceRequest对应产品服务请求,表为:psrIPrice对应价格,表为:pr ...
- Vue 的生命周期图
- 通过github安装crawley出现的问题
http://www.cnblogs.com/hbwxcw/p/7086188.html
- 教你轻松快速学会用Calibre TXT转MOBI
教你轻松快速学会TXT转为有目录的MOBI###授人以渔,lllll5500制作### 需使用软件按先后顺序如下:一.排版助手 官网http://www.gidot.net/typesetter/二. ...
- 1.5eigen中高级初始化
1.5 高级初始化 这一节讨论一些初始化矩阵的高级方法. 1.The comma initializer eigen提供一个简单设定所有矩阵系数.向量.数组系数的初始化语法,从左上角开始到右下角结束. ...
- 工具SQL
1.数据库设计文档维护SQL SELECT COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA_TYPE 字段类型, CHARACTER_MAXIMUM_LENGTH 长度, ...