O desenvolvedor da SEMCONGER precisa criar uma página dinâmica utilizando HTML, CSS e JavaScript para um sistema interno de gerenciamento de contratos. Ele deseja utilizar CSS para definir o layout responsivo e JavaScript para interatividade. A seguir está um trecho do código HTML com CSS embutido: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contratos</title> <style> .container { display: ___________; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <div class="container"> <h1>Gerenciamento de Contratos</h1> </div> </body> </html> Assinale a alternativa que preenche corretamente a lacuna no código CSS, para que o div.container centralize o conteúdo tanto na horizontal quanto na vertical.
- A)flex
Correta: display: flex ativa o Flexbox, permitindo usar justify-content e align-items para centralizar o conteúdo horizontal e verticalmente.
- B)grid
Errada: display: grid pode centralizar, mas a combinação mostrada no enunciado é típica de Flexbox e não é a intenção mais direta do código.
- C)block
Errada: display: block não oferece esse comportamento de alinhamento com justify-content e align-items.
- D)inline-block
Errada: display: inline-block não centraliza conteúdo dessa forma e também não trabalha com essas propriedades como o Flexbox.
Gabarito: A
Nesta questão, o ponto central é lembrar que o CSS usa diferentes valores para o atributo display, e cada um muda o comportamento da caixa do elemento. Quando você quer alinhar o conteúdo tanto na horizontal quanto na vertical com justify-content e align-items, normalmente está falando de um contêiner flex. Isso porque essas propriedades funcionam diretamente no modelo Flexbox, distribuindo e alinhando os itens dentro do elemento pai. Ou seja, a combinação do enunciado entrega a resposta quase de bandeja: sem display flex, essas propriedades não fazem o efeito esperado. No código, a classe .container recebe height: 100vh, que faz o bloco ocupar toda a altura da janela. Aí, com display: flex, o justify-content: center alinha no eixo horizontal e o align-items: center alinha no eixo vertical. Resultado: o h1 fica bonitinho, centralizado no meio da tela, sem sofrimento. Esse é um conhecimento clássico de CSS moderno e muito cobrado em concursos: Flexbox é o recurso mais direto para centralização em duas dimensões dentro de um contêiner. Já block, inline-block e grid têm outros usos, mas não casam com a lógica mostrada no trecho. Em termos práticos, a banca quer que você reconheça que justify-content e align-items são propriedades típicas do Flexbox.