CSS layout problem_html/css_WEB-ITnose
If the size of the parent container is unknown and the size of the child elements is unknown, how can the child elements be vertically centered relative to the parent container?
Reply to discussion (solution)
How could this situation happen? The width and height of the parent container are unknown, which means there is content to hold it open. Since the content is also held open, why is it vertically centered?
You can only use js to dynamically obtain the height of the container, and then position the child container
The parent element sets equal padding-top and padding-bottem values
For the parent The size of the container is unknown, and the size of the child elements is unknown. How to make the child elements vertically centered relative to the parent container?
The layout of the parent element cannot be modified without using JS
If the size of the parent container is unknown and the size of the child element is unknown, how to make the child element vertically centered relative to the parent container?
You cannot modify the layout of the parent element without using JS
The child container is included in the parent container. Set the style of the child container margin:auto; try this, but if the parent container is smaller than the child container, I don’t know what will happen.
This question is a bit like Tencent’s front-end online test question, the front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
This question is a bit like Tencent’s front-end online test question, the front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
In this method, it is impossible to center the child element if the height and width are not fixed. You can try it.
This question is a bit like Tencent’s front-end online test question, that front-end commando.
Use the following to ensure horizontal and vertical centering:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
In this method, it is impossible to center the child element if the height and width are not fixed. You can try it.
That’s the topic. Thank you

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
