如何将div与页面的中间（水平/宽度）对齐[重复]

本文翻译自：How to align a

to the middle (horizontally/width) of the page [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

101 answers 101个答案

I have a div tag with width set to 800 pixels . 我有一个width设置为800像素的div标签。 When the browser width is greater than 800 pixels , it shouldn't stretch the div , but it should bring it to the middle of the page. 当浏览器宽度大于800像素时 ，它不应该拉伸div ，但它应该将它带到页面的中间。

#1楼

参考：

#2楼

This also works in Internet Explorer, but auto margins do not. 这也适用于Internet Explorer，但自动边距不适用。

.centered {position: absolute;display:  inline-block;left:     -500px;width:    1000px;margin:   0 50%;
}

#3楼

Simply use the center tag just after the body tag, and end the center tag just before body ends: 只需在body标签后面使用center标签，然后在body结束前结束center标签：

<body><center>... Your code here ...</center>
</body>

This worked for me with all the browsers I have tried. 这适用于我尝试过的所有浏览器。

#4楼

Some other pre-existing setups from older code that will prevent div page centering L&R are: 旧代码中的一些其他预先存在的设置将阻止div页面居中L＆R：

Other classes hidden in external stylesheet links. 隐藏在外部样式表链接中的其他类。 Other classes embedded in something like an img (like for older external CSS print format controls). 嵌入在img类的其他类（如旧的外部CSS打印格式控件）。 Legend code with IDs and/or CLASSES will conflict with a named div class. 带有ID和/或CLASSES的图例代码将与命名的div类冲突。

#5楼

position: absolute and then top:50% and left:50% places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-top to the negative of the height of the div, ie, -100 shifts it above by 100 and similarly for margin-left . position: absolute然后top:50% and left:50%将顶边放在屏幕的垂直中心，左边放在水平中心，然后通过将margin-top添加到div的高度的负值，即-100将其向上移动100，同样对于margin-left 。 This gets the div exactly in the center of the page. 这使得div恰好位于页面的中心。

 #outPopUp { position: absolute; width: 300px; height: 200px; z-index: 15; top: 50%; left: 50%; margin: -100px 0 0 -150px; background: red; }

 <div id="outPopUp"></div>

#6楼

You can also use it like this: 您也可以像这样使用它：

<div style="width: 60%; margin: 0px auto;">Your contents here...
</div>

如何将div与页面的中间（水平/宽度）对齐[重复]相关推荐

html5 居于页面中心,css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
在html中如何使div在页面中居中显示
在html中如何使div在页面中居中显示最近无聊中又再温习了下html,发现好多东西都忘了.尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来.其实我不知道为什么这样可 ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...
html页面判断其他div为空,将外部html加载到div中 - 页面加载然后变为空白
我确信这将会变成一件愚蠢的事情,但是自从我成为JavaScript noob以来,这里就变成了一件愚蠢的事情.将外部html加载到div中 - 页面加载然后变为空白我想外部HTML内容加载到我的索引 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
保存div与页面滚动条的位置
1/**//// <summary> 2 /// 保存div与页面滚动条的位置 3 /// </summary> 9 /// & ...
符合SEO标准的div+css页面参考
下面的部分是著名设计师阿捷发表的div+css三行两列网页参考,星箭在此基础上做了小小的改动,以前乐思蜀也对阿捷的这个经典布局案例进行过修改,将左右代码互换,达到主体内容显示在前更方便搜索引擎抓取分析 ...
axure中的拐弯箭头_Axure之幼儿养成记---标记元件中页面快照、水平箭头、垂直箭头、便签、圆形和水滴标记...
武汉加油,中国加油 2020年这个春节,有肺炎病毒侵袭,无法与家人团聚,在美丽的山河畅游,愿我们都挺住,相信未来很美好. 感恩你们的陪伴,我们都打好基础,相信我们一定会成长为那名女侠或侠客,加油. 一 ...
html图片位于div最底部,div置于页面底部
一直对于页面置底有一些困惑,下面这个例子不知道能不能解决 foot置底 /*html 和 body 的高度必须*/ html,body { height:100%;} .wrap { position ...
html div将页面划分,css+div网页布局
div+css排版是最新的网页排版理念,完全有别旧的排版方式(比如说table排版).首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容.div+css这种 ...

如何将div与页面的中间（水平/宽度）对齐[重复]

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何将div与页面的中间（水平/宽度）对齐[重复]相关推荐

最新文章

热门文章