How to set a DIV block with dynamic size with header DIV block above it at center of the page horizontally and vertically?

Question

I have a DIV block where there are a title and an image into the him. The image is setted by mouse click, so I don't know the size of image and DIV block. It's a structure:

.view-image .header { text-align: center; border: 1px solid black; }
.view-image .image { max-width: 100%; } 
.view-image {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    text-align: center;
}

<div class = "view-image">
    <div class = "header">View of image</div>
    <div class = "image"><img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" /></div>
</div>

I need that view-image block will take place in the centre of page horizontally and vertically. And, it's very important, the width of header and image blocks must be same.

Later I saw that Firefox doesn't support height: fit-content, in the IE and Edge also width: fit-content doesn't work.

How to make this? Of course, I can set a view-image sizes by JavaScript after image selecting, but if is it possible, it will be better do it without JS.

P.S. I want to write why my question isn't a duplicate in my opinion. The main complexity is the width of header block. If I use the flexbox as you suggest, the width of header will be count by width of the its inner text, and header width doesn't equal to image width. But if I use the fit-content as in my code, the header width and the image width are idential. It's very important for me, because in my site the header has a borders and background color, and if these blocks have different width, it won't be good. Maybe I wrote my question incorrect, then I'm sorry and I have edited my question. I have changed the title and added the border for header block in my code

Added: I found the solution by changing the structure to this:

<div class = "view-image">
    <div class = "image">
        <div class = "header">View of image</div>
        <img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" />
    </div>
</div>

I'm very sorry for incorrect question

Make the parent container `display: flex` and you're half-way there. The full answer to your question already exists on SO. ;) — domsson, Sep 02 '19 at 13:40

score 1 · Answer 1 · edited Sep 02 '19 at 14:17

1

Here is an example using flexbox:

.view-image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

<div class="view-image">
    <div class="header">View of image</div>
    <div class="image">
        <img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png"/>
    </div>
</div>

edited Sep 02 '19 at 14:17

Minding

1,383
1
17
29

answered Sep 02 '19 at 13:46

ocheriaf

580
3
11

In my example (with `fit-content` using) the width of **header** is equal to width of **image**. In your case it isn't that :( – Никита Однороб Sep 02 '19 at 18:03

How to set a DIV block with dynamic size with header DIV block above it at center of the page horizontally and vertically?

1 Answers1