div不在中间，margin 0 auto？

Posted 2023-03-06

【中文标题】div不在中间，margin 0 auto？

【英文标题】：div not in the middle with margin 0 auto?

【发布时间】：2015-07-09 05:33:00

【问题描述】：

我有一个确认框，我想在屏幕中间显示它。

margin 0 auto 没有解决我的问题。

如何才能居中？

https://jsfiddle.net/y5u5obL0/

#confirmBox
 position:fixed;
 margin:0 auto;
 width:500px;
 height:150px;
 background:#ffffff;
 border:1px solid #ddd;

【问题讨论】：

您可以在[在此处输入链接描述][1] [1]中看到解决方案：***.com/questions/2005954/…

Why can't I center with margin: 0 auto?的可能重复

【参考方案1】：

因为元素是固定的。

您需要添加left: 0;/right: 0 以使元素居中（与margin: 0 auto 结合使用）。这样做时，从技术上讲，元素会拉伸以填满屏幕，但由于它具有指定的宽度，因此它将被包含在可用空间内并居中。

Updated Example

#confirmBox 
    position:fixed;
    left: 0;
    right: 0;
    margin:0 auto;
    width:500px;
    height:150px;
    background:#ffffff;
    border:1px solid #ddd;

【讨论】：

保证金：0自动；在您不提供 left:0 之前将无法工作；和右：0

@NileshMahajan 为什么你说这行不通，然后在我之后发布相同的解决方案？这没有意义。

我不小心评论了你的答案，其实我是想在问题下方发表评论，你的答案是正确的。

抱歉打扰了。

@NileshMahajan 完全没问题.. 那条评论只是令人困惑，仅此而已。

【参考方案2】：

使用以下代码将任何内容垂直和水平居中，如果您想将其从页面流中删除，请相对于绝对值进行更改。查看演示以查看实际效果

(Demo)

html

<div class="wrap">
    <div class="mycontent">
        Hello World!
    </div>
</div>

CSS

.wrap 
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    max-width: 100%;
    max-height: 100%;

【参考方案3】：

保证金：0自动；在您不提供 left:0 之前将无法工作；右：0

检查小提琴的工作示例：https://jsfiddle.net/nileshmahaja/y5u5obL0/1/

CSS

#confirmBox
 position:fixed;
 margin:0 auto;
 width:500px;
 height:150px;
 background:#ffffff;
 border:1px solid #ddd;
 left:0; /* Added Property */
 right:0; /* Added Property */