Question

我想知道如何将这个盒子放在中心？

HTML代码：

<div id="box"></div>

CSS代码：

#box
{
  width : 30%;
  height : auto;
  overflow : auto ;
  border : 1px solid #C5C5C5;
  background : #F8F8F8;
  position : absolute;
  left : 33.6%;
  border-top : none;
  text-align : left;
  display : none;
}

Answer 1

尝试以下CSS：

#box
{
    margin: 0 auto;
    width: 100px; /* Or some other width */
}

Answer 2

由于#box是绝对定位的，你可以将其置于中心位置：

#box {
    left: 50%; /* centers #box in its containing element */
    margin-left: -15%; /* half the element's width (30%) */
}

这些属性是您已经设置的属性的补充。

想法是将＃box的左边缘放在其包含元素的中心（左边：50％），然后将#box向左移动一半自己的宽度，给它一个负边距（margin-left：-15％））。

Answer 3

这对我有用：

.Box {
   background-color: lightgrey;
   width: 400px;
   border: 25px solid grey;
   padding: 25px;
   margin: 25px;
   align-content:center;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -100px;
}

如何在CSS中居一个框？

3 个答案: