держать один или несколько div всегда в центре родительского div

Question

Я хочу сделать портфолио как вещь, но в нем нет изображений. На самом деле, я хочу, чтобы в нем размещался контейнер родительского div 1, 2 или 3 div. Когда три - это только один div примерно от 30% до 33% от ширины внутри, он должен выглядеть в центре родительского div i.e (---- div ----).

Когда есть 2 дивы внутри, те два должны смотреть в центре родительского DIV, т.е. (- ДИВ ДИВ -)

даже когда я вхожу четвёртую Див родительский DIV держать их в середине , тот же margin/padding слева и справа. i.e (div div div)

Если я ввешу больше divs под уже существующими divs, новый будет точно таким же образом под ними.

(---- ДИВ ----) только один DIV (- ДИВ ДИВ -) два дивы (ДИВ ДИВ ДИВ) три дивы

I need these divs with some background and will put text in it

Answer 1

Вы можете использование display: inline-block css свойство. Read more об этом, чтобы узнать, как вы можете использовать его для выравнивания по центру элементов.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    font-family: Arial, sans-serif; 
 
    line-height: 20px; 
 
    font-size: 14px; 
 
    margin: 0; 
 
} 
 
.parent { 
 
    letter-spacing: -4px; 
 
    text-align: center; 
 
    padding: 16px 0; 
 
    font-size: 0; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0 8px 16px; 
 
    letter-spacing: 0; 
 
    font-size: 14px; 
 
    width: 33.33%; 
 
} 
 

 
.child-holder { 
 
    line-height: 200px; 
 
    background: #000; 
 
    font-size: 25px; 
 
    height: 200px; 
 
    color: #fff; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="child-holder">Child 1</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="child-holder">Child 2</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="child-holder">Child 3</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="child-holder">Child 4</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="child-holder">Child 5</div> 
 
    </div> 
 
</div>

Answer 2

.parent {выравнивания текста: центр} .child {дисплей: встроенный блок; ширина: 33%}

Это позволит решить вашу проблему.

Answer 3

Flexbox может это сделать.

.child { 
 
    height: 40px; 
 
    background: red; 
 
    width: 100px; 
 
    margin: 0 1em; 
 
} 
 
.parent { 
 
    margin: 1em; 
 
    display: flex; 
 
    justify-content: center; 
 
    border: 1px solid grey; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>