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

最新推荐文章于 2021-08-03 20:42:34 发布

p15097962069

最新推荐文章于 2021-08-03 20:42:34 发布

阅读量144

点赞数

文章标签： css html alignment center

原文链接：https://oldbug.net/q/409m/How-to-align-a-div-to-the-middle-horizontally-width-of-the-page-duplicate

版权

本文翻译自：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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何将<div>与页面的中间（水平/宽度）对齐[重复]

This question already has an answer here: 这个问题在这里已有答案： How to horizontally center a <div
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。