Получение элемента CSS для автоматического изменения размера до ширины содержимого и одновременного центрирования

У меня есть элемент CSS с рамкой вокруг него, в котором может быть один или несколько полей, поэтому ширина всего div меняется в зависимости от того, сколько ящиков находится внутри него. Однако я хочу, чтобы весь этот div располагался по центру экрана.

Обычно, чтобы центрировать объекты, я просто использую:

margin-left: auto;
margin-right: auto;

Но на этот раз мне нужно либо разместить элемент, либо сделать его встроенным блоком, чтобы размер div будет изменен в соответствии с размером содержимого, и если я это сделаю, режимы margin-left и margin-right auto не будут работать, они всегда останутся в левой части экрана.

В настоящее время у меня есть:

#boxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

Я также пробовал с float: left вместо display: inline-block .

Кто-нибудь знает хороший способ как центрировать div, так и изменять его размер к контенту одновременно? Любая помощь будет принята с благодарностью.