Good day!
Is it possible to achieve the following through css:
1. if the block size (div) is smaller than the size of the external block (div), then it is located in the center of the external block
2. if the block width is greater than or equal to the width of the outer block, then the block is aligned with the right edge of the outer block
3. if the block height is greater than or equal to the height of the outer block, then the block is aligned with the lower edge of the outer block
The dimensions of the outdoor unit depend on the window size, the dimensions of the indoor unit are constant and can be set.

    1 answer 1

    To do this, we need another auxiliary container, in the example I called it container . We will position it in the center using flexbox, but what is inside the container , namely the item block, we will position using flexbox with the properties justify-content: flex-end; and align-items: flex-end; Thus, while the item element is equal to container, then all our elements are in the center, and if the item does not fit, then it is shifted according to the specified rules.

    Added an example at https://jsfiddle.net/mdvp65a4/ for convenience

    .wrp { margin: 50px auto; display: flex; width: 30%; height: 50vh; max-height: 300px; justify-content: center; align-items: center; border: 1px solid #000; } .container { display: flex; justify-content: flex-end; align-items: flex-end; max-width: 100%; max-height: 100%; } .item { width: 150px; height: 150px; background-color: #ccc; flex-shrink: 0; font-size: 12px; } 
     <div class="wrp"> <div class="container"> <div class="item"> Я буду в центре пока помещаюсь, а потом буду смещаться влево от правого края и вверх от нижнего края, если не влезу по одной из сторон </div> </div> </div>