参考链接:https://www.cnblogs.com/softwarefang/p/6095806.html

以前我的方法总是比较粗暴,纯粹通过margin来实现,这个方法的缺点不仅在于需要多次微调来确定margin的值,更愚蠢的地方在于,这个办法太没有技术了,设置margin会对页面原本元素的尺寸造成影响,刚好最近用这个东西比较多,我就抱着不怕学不会的心态上网搜索了一下,结果看到了一个这样的方法。

div{
width:260px;
height: 210px;
position: absolute;
left: 50%;
top:50%;
margin: -105px 0 0 -130px;
}

  这个方法的大概思想是想通过定位来让盒子定外到一个大致的区域,然后再根据他的长宽算出这样定位的误差,用margin去修正,这样就让一个盒子实现了水平和垂直居中。

使用margin的css,这样会造成全屏时的浏览器窗口出现上下的滚动条。

div{
width:260px;
height: 210px;
margin:20% auto;
background:rgb(194, 199, 202, 0.3);
text-align: center;
background-size: cover;
}

  

让div垂直居中的更多相关文章

  1. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  2. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  3. div垂直居中的问题

    工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...

  4. 由12306出错想到的div垂直居中的问题

    今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...

  5. css的div垂直居中的方法,百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  6. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  7. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  8. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  9. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  10. div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. MySQL---Day2

    -- 转载:http://www.cnblogs.com/yuanchenqi/articles/6357507.html CREATE TABLE employee1( id TINYINT PRI ...

  2. node——npm

    npm 1.npm是nodejs的包管理器 2.npm 有很多代码仓库和代码模块 3.npm有一个npm客户端 4.npm本身也是基于Node.js开发的包 5.npm install npm@lat ...

  3. js类的使用

    brush示例 以d3的一个brush进行叙述,示例见: https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 应用情形: 当页 ...

  4. NodeJS踩坑实录

    nodejs的常用api url 主要是配置一系列和路径相关的信息 url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 将一个U ...

  5. u-boot for tiny210 ver1.0(by liukun321咕唧咕唧)

     新版本下载: 下面的链接提供了较新版本的源码 ver4.0源码下载:u-boot for tiny210 ver4.0 ver3.1源码下载: u-boot for tiny210 ver3.1 v ...

  6. ubuntu12.04开启Framebuffer

    一.framebuffer概述 Framebuffer在Linux中是作为设备来实现的,它是对图形硬件的一种抽象,代表着显卡中的帧缓冲区(Framebuffer).通过Framebuffer设备,上层 ...

  7. 2019-03-18 用Task Schedule定时调用Python脚本

    1.空白处右键新建Task(Create New Task)设置每日定时(Daily) 2.新建Actions 3.填写 Program+Start in 为Python的路径:C:\python36 ...

  8. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  9. Springboot2本地锁实践

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交…. 下面我们利用 ...

  10. MRv2 工作机制 、 公平调度器、MR压缩、边数据

    对于节点数超过 4000 的大型集群,前一节描述的 MapReduce 系统开始面临着扩展的瓶颈. 2010 年 Yahoo 的团队开始设计下一代的 MapReduce. (Yet Another R ...