让浏览器窗口即使缩小也能定位在网页正中心

最新推荐文章于 2022-07-12 00:57:00 发布

tarajk05

最新推荐文章于 2022-07-12 00:57:00 发布

阅读量844

点赞数

分类专栏： html css

html css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

只需要在css加如下的代码，就可以使网页中在浏览器窗口缩小时也能居中显示：

*{margin:0px; padding:0px;}
body{margin:0 auto;}/*上下外边距为0px，左右外边距自适应，就能让页面在浏览器窗口自动居中*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tarajk05

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

用CSS3实现浏览器的缩放功能

蒋宇捷的专栏

02-13

2万+

h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法

weixin_28278377的博客

12-30

1417

1、使用meta标签：viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页...

参与评论您还未登录，请先登录后发表或查看评论

浏览器窗口放大缩小后页面内容居中解决方法

lijunlinlijunlin的专栏

05-24

8296

先说下简单的思路： 1.获得窗口的大小，高度，宽度。 2.要知道显示的图片（我这里用图片举例）的大小，宽，高。（我的图片显示设置为宽：960，高600 ） 3.简单算法，获得的浏览器宽，高减去图片的宽，高除以2 就是间隔距离了。 4.当然还有获得窗口放大，缩小的事件了。根据事件来设置（margin）。首先将图片弄到body里面，代码如下：（不知道怎么添加代码块，只有

浏览器窗口大小发生变化时，让弹出的窗体自动居中

鱼骨头

11-20

438

//浏览器窗口大小发生变化时，让弹出的窗体自动居中Ext.EventManager.onWindowResize (function(){ if(addServerInfoWindow){ addServerInfoWindow.setHeight(document.body.clientHeight/1.5); addServerInfoWind...

jsp页面定位到某个div

baidu_39586935的博客

10-07

1066

这篇文章写的很好 https://blog.csdn.net/xyc_csdn/article/details/72844312 我只是用来其中一个方法 js方法中添加如下：id为要定位到该div的id document.querySelector("#com").scrollIntoView(); ...

固定定位居中

weixin_45766103的博客

11-15

762

position:fixed; left:50%; margin-left:负的自己宽度的一半

盒子模型简单理解

yyn8888的博客

09-17

199

盒子模型先记一下我觉得比较重要的东西 CSS的优先级内联样式>ID 选择器>伪类>属性选择器>类选择器>元素（类型）选择器>通用选择器行内元素，块元素，行内块元素之间的转换 display:inline; //块级元素（独占一行）变为行内元素–可以文本居中 display:block; //行内元素变为块级元素–可以设置宽高 display:inline-block; //其实仍是行内元素，但是可以设置width及height属性等 ----------------

A盒子使用绝对定位，B盒子使用相对定位，A盒子紧贴着B盒子，当浏览器窗口变小后A盒子就被B盒子覆盖住了，怎么才能使浏览器窗口缩小后A盒子也能紧贴着B盒子...

最新发布

06-08

可以给A盒子添加一个负的margin-left值，值为B盒子的宽度，这样A盒子就能够始终紧贴着B盒子，即使浏览器窗口变小。具体的CSS代码如下： ``` .b { position: relative; } .a { position: absolute; left: 0; top...

A盒子使用绝对定位，B盒子使用相对定位，A盒子紧靠着B盒子，当浏览器窗口变小后A盒子就被B盒子覆盖住了，怎么才能使浏览器窗口缩小后A盒子也能紧靠着B盒子

02-06

当使用绝对定位的A盒子紧靠着相对定位的B盒子时，可以使用媒体查询来调整A盒子的位置。在媒体查询中设置A盒子的定位属性为相对定位，并将其与B盒子重叠。这样，当浏览器窗口缩小时，A盒子也能紧靠着B盒子。

jQuery窗口缩小总览地图定位插件效果--minimap.js

06-10

默认左侧是页面主要内容，minimao.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果可以点击并快速定位到页面的某个位置，效果相当好 minimap.js插件，基于jQuery1.11.1...

【Flex】编辑器的缩放功能（绝对定位和相对定位）

博客

11-29

887

一、横向的ide拖动缩放效果 ``` <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.ado

php网页缩放时自动居中,WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

weixin_36158990的博客

03-24

381

WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介1. remrem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。示例若根元素 font-size 为 12pxhtml {font-size: 12px;}h1 {font-size: 2rem; /* 2 × 12px = 24px */}p {font-siz...

不论页面怎样放大缩小，内容一直保持居中的方法

TE杨

12-15

5518

无论什么元素，都在最外面加一个父盒子div,设置div的宽度,然后margin:0,auto;就好了

css缩放原点,使用css3转换原点居中并缩放

weixin_39634443的博客

08-04

1074

我的页面上有一系列div。每个div都有一个背景图像，并以网格形式排列。我的网页上有不计其数的div。该页面被约束为一个大小使用使用css3转换原点居中并缩放我想能够点击一个div，让它缩放到一个特定的比例，并居中。我的标记：我的CSS：#pack1{margin-left: 20px;margin-top: 20px;height: 193px;width: 127px;background-i...

大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）

sxww_zyt的博客

04-30

9401

本篇记录了大屏的三种缩放（按分辨率进行缩放、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)和窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条）的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~

css布局两边固定中间自适应的四种方法

weixin_30642305的博客

04-29

814

第一种：左右侧采用浮动中间采用margin-left 和 margin-right 方法。代码如下： <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容固定宽度</di...

解决css中div随窗口大小变化而变化

烟溪彭于晏的博客

07-12

9943

本来还很好看一旦缩放窗口，就成了这样恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......

html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法

weixin_42162216的博客

06-03

3355

先说下简单的思路：1.获得窗口的大小，高度，宽度。2.要知道显示的图片(我这里用图片举例)的大小，宽，高。(我的图片显示设置为宽：960，高600)3.简单算法，获得的浏览器宽，高减去图片的宽，高除以2 就是间隔距离了。4.当然还有获得窗口放大，缩小的事件了。根据事件来设置(margin)。首先将图片弄到body里面，代码如下：(不知道怎么添加代码块，只有写出来了。) body 里...

浏览器窗口小化时div相对位置不变

Jonia的Castle

04-02

8411

无论浏览器的窗口怎么变化，div的相对位置不变，position:relative;父div定义这个，然后再去用绝对定位跟相对定位，子div就是跟着父div的左上角了，如果不事先定义的话，那绝对定位跟相对定位只能相对于body来定位了！这样，当窗口缩小时，所有的div排列正常！主页面 body{ margin:0px; width:1350px;