div盒子水平居垂直中的几种方法
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8"/>
<style>
*{
margin: 0;
padding: 0;
}
/*方案1、使用transforms属性的translate平移*/
.div1{
position: absolute;
width: 500px;
height: 500px;
border: 1px solid #000;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.div2{
position: absolute;
width: 250px;
height: 300px;
border: 1px solid#000;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
margin 负间距
/*
1.必需知道该div的宽度和高度，
*/
.div3{
position: absolute;
width: 100px;
height: 50px;
border: 1px solid#000;
margin-top: -26px;
margin-left: -51px;
left: 50%;
top: 50%;
}
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
div盒子水平居垂直中的几种方法的更多相关文章
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- Power BI官方视频(2) Power BI嵌入到应用中的3种方法
今天给大家介绍3种将Power BI嵌入到应用中的方法. 本文原文地址:Power BI官方视频(2) Power BI嵌入到应用中的3种方法 Power BI系列文章地址:微软Power BI技术文 ...
- JavaScript确定一个字符串是否包含在另一个字符串中的四种方法
一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...
- 设置一个DIV块固定在屏幕中央（两种方法）
设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）
这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...
- div垂直水平居中的四种方法总结
5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...
随机推荐
- rsync3.1.3的编译安装和常用操作
.rsync的编译安装 .tar.gz cd rsync- ./configure --prefix=/usr/local/rsync- --disable-ipv6 .rsync的配置文件: [ro ...
- OpenCV3编程入门读书笔记5-边缘检测
一.边缘检测的一般步骤 1.滤波 边缘检测的算法主要是基于图像强度的一阶和二阶导数,但导数通常对噪声很敏感,因此必须采用滤波器来改善与噪声有关的边缘检测器的性能. 2.增强 增强边缘的基础是确定图像各 ...
- FizzBuzz
写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...
- 【原创】大叔问题定位分享（12）Spark保存文本类型文件（text、csv、json等）到hdfs时为什么是压缩格式的
问题重现 rdd.repartition(1).write.csv(outPath) 写文件之后发现文件是压缩过的 write时首先会获取hadoopConf,然后从中获取是否压缩以及压缩格式 org ...
- LVS前奏-ARP知识回顾
什么是ARP协议: ARP协议,全称“Address Resolution Protocol”(地址解析协议),使用ARP协议,可以实现将IP地址解析成对应主机的物理地址(MAC地址) 为了能够正确的 ...
- 精通ArrayList,关于ArrayList你想知道的一切
目录 精通ArrayList,关于ArrayList你想知道的一切 前言 ArrayList 内部结构,和常用方法实现 实例化方法 添加元素 add()方法 get()方法 移除元素 怎么扩容的 序列 ...
- thinkphp5图片上传接口
public function avatarUpload() { $file = request()->file('file'); $filePath = 'avatar'; $width = ...
- Hadoop生态组件Hive，Sqoop安装及Sqoop从HDFS/hive抽取数据到关系型数据库Mysql
一般Hive依赖关系型数据库Mysql,故先安装Mysql $: yum install mysql-server mysql-client [yum安装] $: /etc/init.d/mysqld ...
- Java Web环境搭建
——————————JavaWeb环境搭建 先下载JDK, Tomcat 7.0 安装JDK后,配置环境变量,此处可参考博客: https://www.cnblogs.com/smyhvae/p/37 ...
- 使用 NPOI 导出 Excel 文件
[NPOI简介] NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者 ...