Как я могу центрировать поле в CSS?

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%) */
}

Эти свойства в дополнение к тем, которые вы уже установили.

Идея состоит в том, чтобыпоместите левый край поля # в центре содержащего его элемента (слева: 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;
}