HTML-CSS: Flexbox centering

Last update on March 08 2024 13:34:53 (UTC/GMT +8 hours)

HTML-CSS : Exercise-27 with Solution

Using HTML, CSS horizontally and vertically centers a child element within a parent element using flexbox.

Use display: flex to create a flexbox layout.
Use justify-content: center to center the child horizontally.
Use align-items: center to center the child vertically.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS horizontally and vertically centers a child element within a parent element using flexbox</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="flexbox-centering"><!-- Comment: Defines a container for the centered child element -->
<div>w3resource.com</div><!-- Comment: Defines a div element containing the text "w3resource.com" -->
</div><!-- Comment: End of the container for the centered child element -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a container div and a child element to be centered using flexbox.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the flexbox-centering div, there's another div containing the text "w3resource.com" to be centered.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.flexbox-centering { /* Comment: Styles the container for flexbox centering */
  display: flex; /* Comment: Displays the container as a flex container */
  justify-content: center; /* Comment: Centers the child elements horizontally within the container */
  align-items: center; /* Comment: Centers the child elements vertically within the container */
  height: 100px; /* Comment: Sets the height of the container */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.flexbox-centering styles the container div for flexbox centering.
display: flex; property makes the container a flex container, enabling flexbox layout.
justify-content: center; property centers the child elements horizontally within the container.
align-items: center; property centers the child elements vertically within the container.
height: 100px; property sets the height of the container to 100 pixels.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.