居中位置：固定元素
我想制作一个以屏幕为中心的 position:fixed; 弹出框，具有动态宽度和高度。我为此使用了 margin: 5% auto; 。如果没有position:fixed;，它会水平居中，但垂直居中。添加 position:fixed; 后，它甚至没有水平居中。
这是完整的集合：
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>如何使用 CSS 使该框在屏幕中居中？
I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed;, it's even not centering horizontally.
Here's the complete set:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>How do I center this box in screen with CSS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（24）
如果您的 div 具有已知的宽度和高度，那么您基本上需要将
top和left设置为50%以使左上角居中该分区的。您还需要将margin-top和margin-left设置为 div 高度和宽度的负一半，以将中心移向 div 的中间。或者，如果您的 div 具有动态/未定义的宽度和/或高度，则将
transform设置为 div 相对宽度和高度的负半部分，而不是margin。或者，如果您的 div 至少具有固定宽度，并且您并不真正关心垂直居中，那么您也可以添加
left: 0和right: 0到margin-left和margin-right为auto的元素，以便具有固定宽度的固定定位元素知道其左边和右边的位置右偏移开始。在你的情况下：If your div has a known width and height, then you basically need to set
topandleftto50%to center the left-top corner of the div. You also need to set themargin-topandmargin-leftto the negative half of the div's height and width to shift the center towards the middle of the div.Or, if your div has a dynamic/undefined width and/or height, then instead of the
margin, set thetransformto the negative half of the div's relative width and height.Or, if your div has at least a fixed width and you don't really care about centering vertically, then you can instead also add
left: 0andright: 0to the element having amargin-leftandmargin-rightofauto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:这是一种将具有动态宽度的元素水平居中的现代方法 - 它适用于所有现代浏览器； 可以在此处查看支持。
更新示例
对于垂直和水平居中，您可以使用以下内容：
更新的示例
您可能还希望添加更多供应商前缀属性（请参阅示例）。
Here is a modern approach for horizontally centering an element with a dynamic width - it works in all modern browsers; support can be seen here.
Updated Example
For both vertical and horizontal centering you could use the following:
Updated Example
You may wish to add in more vendor prefixed properties too (see the examples).
或者只需将
left: 0和right: 0添加到原始 CSS 中，这使其行为类似于常规非固定元素，并且通常的自动边距技术可以工作：请注意，您需要使用有效的 (X)HTML
DOCTYPE才能在 IE 中正确运行（您当然应该拥有它......！）Or just add
left: 0andright: 0to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:Note you need to use a valid (X)HTML
DOCTYPEfor it to behave correctly in IE (which you should of course have anyway..!)添加一个容器，例如：
然后将您的盒子放入此 div 中即可完成工作。
编辑：正如评论中提到的，内部内容需要设置为
display: inline-block假设有两个 div，例如：那么内部的 CSS 需要是：
与外部一起div 具有
left: 0; right:0;和text-align: center这会将内部 div 居中对齐，而不显式指定内部 div 的宽度。Add a container like:
Then put your box into this div will do the work.
Edit: as mentioned in the comments, the inner content needs to be set to
display: inline-blockassuming there're two divs like:Then the CSS for the inner needs to be:
Together with the outer div having a
left: 0; right:0;andtext-align: centerthis will align the inner div centered, without explicitly specifying the width of the inner div.中心固定位置元件
（我知道的简单且最好的方法）
用于水平居中和垂直（如果高度与宽度相同）
当在居中元素内部的弹性盒中使用边距时，这两种方法都不会限制居中元素的宽度小于视口宽度
Center fixed position element
(the simple & best way I know)
For centering it horizontally & vertically (if height is same as width)
Both of these approaches will not limit centered element's width less than viewport width, when using margins in flexbox, inside centered element
只需添加：
Just add:
它里面可以是任何具有不同宽度、高度或不具有不同宽度、高度的元素。
全部都居中。
inside it can be any element with diffenet width, height or without.
all are centered.
此解决方案不需要您定义弹出 div 的宽度和高度。
http://jsfiddle.net/4Ly4B/33/
并且不计算弹出窗口的大小，并减去顶部的一半，javascript正在调整popupContainer的大小以填充整个屏幕...
（100％高度，在使用display：table-cell时不起作用；（需要将某些东西垂直居中））...
不管怎样，它有效:)
This solution does not require of you to define a width and height to your popup div.
http://jsfiddle.net/4Ly4B/33/
And instead of calculating the size of the popup, and minus half to the top, javascript is resizeing the popupContainer to fill out the whole screen...
(100% height, does not work when useing display:table-cell; (wich is required to center something vertically))...
Anyway it works :)
无法在 IE7 下运行。
更改为
开始工作，但在其他浏览器中它停止工作！
所以下面IE7就用这种方式
Was not working under IE7.
Changed to
Started working but in the rest browsers it stop working!
So used this way for IE7 below
我使用了vw（视口宽度）和vh（视口高度）。视口是您的整个屏幕。
100vw是屏幕总宽度，100vh是总高度。I used
vw(viewport width) andvh(viewport height). viewport is your entire screen.100vwis your screens total width and100vhis total height.您基本上可以将其包装到另一个
div中，并将其position设置为fixed。You can basically wrap it into another
divand set itspositiontofixed.我只是使用这样的东西：
它使对话框水平和垂直居中，我可以使用不同的宽度和高度来适应不同的屏幕分辨率，使其响应媒体查询。
如果您仍然需要为不支持 CSS 自定义属性或
calc()的浏览器提供支持（请检查 caniuse），则不是一个选项。I just use something like this:
It centers the dialog box both horizontally and vertically for me, and I can use different width and height to fit different screen resolutions to make it responsive, with media queries.
Not an option if you still need to provide support for browsers where CSS custom properties or
calc()are not supported (check on caniuse.)这对我来说效果最好：
This one worked the best for me:
你可以设置这样的东西
You could set something like this
要固定位置，请使用以下命令：
To fix the position use this :
简单，试试这个
simple, try this
一种可能的答案：
One possible answer:
尝试将其用于无法正确居中的水平元素。
width: calc (width: 100% - 宽度，无论其他偏离中心的位置)
例如，如果您的侧面导航栏是 200px：
Try using this for horizontal elements that won't center correctly.
width: calc (width: 100% - width whatever else is off centering it)
For example if your side navigation bar is 200px:
当您不知道要居中的对象的大小并且希望它在所有屏幕尺寸中居中时，这会非常有效：
This works wonderfully when you don't know the size of the thing you are centering, and you want it centered in all screen sizes:
我用的很简单。例如，我有一个
位置：固定的导航栏，因此我调整它以在边缘留出一个小空间，如下所示。这个想法是取宽度的剩余百分比“在本例中为 2%”并使用它的一半。
What I use is simple. For example I have a nav bar that is
position : fixedso I adjust it to leave a small space to the edges like this.The idea is to take the remainder percentage of the width "in this case 2%" and use the half of it.
遇到这个问题，所以我得出结论，使用（不可见的）容器是最好的选择（基于答案@Romulus Urakagi Ts'ai）。使用flexbox实现：（
语法是SCSS，但可以轻松修改为纯CSS）
Had this problem so I concluded that using a (invisible) container is the best option (based on answer @Romulus Urakagi Ts'ai). To make it with flexbox:
(the syntax is SCSS but can be easily modified to pure CSS)
具有
position:fixed属性的 div 的中心元素Html 和 Css 代码
Center element of a div with the property of
position:fixedHtml and Css code
另一个简单的解决方案是将元素的
width设置为fit-content并将left和right设置为0px；如果您不知道元素的宽度，这非常有用。
Another simple solution is to set the
widthof the element tofit-contentand set theleftandrightto0px;This is useful if you don't know the width of the element.
唯一万无一失的解决方案是使用表align=center，如下所示：
我不敢相信世界各地的人们浪费大量愚蠢的时间来解决像居中div这样的基本问题。 css 解决方案并不适用于所有浏览器，jquery 解决方案是一种软件计算解决方案，由于其他原因而不是一个选项。
我已经浪费了太多时间反复避免使用表格，但经验告诉我停止对抗它。使用 table 将 div 居中。在所有浏览器中始终有效！再也不用担心了。
The only foolproof solution is to use table align=center as in:
I cannot believe people all over the world wasting these copious amount to silly time to solve such a fundamental problem as centering a div. css solution does not work for all browsers, jquery solution is a software computational solution and is not an option for other reasons.
I have wasted too much time repeatedly to avoid using table, but experience tell me to stop fighting it. Use table for centering div. Works all the time in all browsers! Never worry any more.