Question

我正在寻找一种风格，将this fiddle中的白框与屏幕中心对齐。

我以为我可以在外部div元素中使用text-align-middle。但遗憾的是它不起作用。

我一直在努力工作几个小时，希望你能帮助我。

提前谢谢。

Answer 1

将此添加到您当前的CSS：

.abs {
    width: 100%;
}
.box {
    width: 220px;
    margin: auto;
}

Answer 2

.background1{
   margin:auto;
    background-color:#000000;
     min-width:100%;
    min-height:500px;
}
.bgcolor {
    position:relative;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:0.5;
}
.abs {
  display:block;
    margin:auto;
     width:100%;
    height:500px;
}
.box {
    margin:auto;
    position: relative;
    width:220px;
    height:80px;
    background-color:#ffffff;
    border:1px solid grey;
}

Answer 3

.abs{
    position: aboslute;
    width: 100%;
}

.box{
    /*either use*/
    width: 220px; /*or larger for fixed width*/
    /*or use*/
    max-width: 400px; /*or any other size to give it a flexible auto size*/

    margin: auto; /* or margin: 0 auto 0 auto;*/
}

较旧的IE版本不允许此类构造。在这种情况下，你必须添加：

.abs{
    text-align: center;
}
.box{
    text-align: left;
}

为了向后兼容。

如何将“框”对齐到屏幕中间？

3 个答案: