如何将div居中于窗口？
埃尔法耶
我想仅使用css和将div居中less。
这是我到目前为止尝试过的：
#exampleSquare {
position: absolute;
height: 100px;
width: 100px;
background-color: gray;
left: calc(~"`$(window).width()` / 2- 50px");
}
警告：
- 上面的代码基于：在更少的时间内使用javascript计算的值
- 不要更改
position: absolute，库会像这样处理它。我简化了问题。 - 不要更改
window.width的事情50%，在我的情况下，DIV是一个很大的容器内。因此，50%将引用其父级大小，而不是窗口。 - 不要使用添加容器
text-align: center;，此div容器（父容器）也由库处理。
我只需要left语法即可返回正确的偏移量。
编辑：
根据Nico O的评论，这是我详细的CSS控制台中的内容：
编辑：
尼科Ø指出，这个错误的事实来，我用铬V.32和vw语法只因为V.36支持：参考
Salketer
#exampleSquare {
position: absolute;
height: 100px;
width: 100px;
background-color: gray;
left: 50%;
margin-left:-50px;//Half width
}
我知道您说过不要将50％留在左边，因为这会导致父母的宽度，但事实是它相对于其放置的容器...如果您将窗口尺寸减半并将其放在左边，它的容器位置是相对的还是绝对的，left：0是它的边界，而不是窗口边界。因此，为什么我认为这个答案会有所帮助。
否则，您将需要此代码段，但是我不那么了解JS计算，因此无法说是否可行：
($(window).width()-$(this).offsetParent().offset())/2
它采用了窗口的宽度与将要应用的left：0px当前位置之间的差。然后除以二，因为我们要中心而不是完全正确。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将div以相对宽度居中？
- 2
如何将div水平居中
- 3
如何将子div与较小的父div居中
- 4
如何居中DIV弹出窗口？
- 5
如何将最大宽度的div居中，并且如果窗口小于div，则div的每一侧仍会有一些边距空间？
- 6
如何将H1在div中垂直居中？
- 7
如何将fontawesome图标居中div元素
- 8
如何将宽度取决于内容的div居中
- 9
如何将内部div居中放置？
- 10
如何将div沿y轴居中？
- 11
如何将div垂直和水平居中？
- 12
如何将div以“ collapse”（引导）类居中？
- 13
如何将3列CSS Div站点居中？
- 14
我如何将这个div垂直居中？
- 15
如何将也具有最大宽度的流体div居中？
- 16
如何将没有宽度的div水平居中？
- 17
如何将<div>居中并使用固定位置？
- 18
如何将内部div居中放置？
- 19
如何将表格居中放置在 div 中？
- 20
如何将居中图表的条形居中？
- 21
如何将居中图表的条形居中？
- 22
如何将图像居中
- 23
如何将内容居中
- 24
如何将列表居中
- 25
如何将标题居中？
- 26
如何将内容居中
- 27
如果更改分辨率，如何将一组div居中居中
- 28
如何将旋转的子 div 居中到旋转的父 div 并粘在父 div 的顶部？
- 29
如何在浏览器窗口缩放时将 DIV 居中
我来说两句