HTML-CSS: Display table centering

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

HTML-CSS : Exercise-26 with Solution

Using HTML, CSS vertically and horizontally centers a child element within its parent element, using display: table.

Use display: table to make the .center element behave like a <table> element.
Set height and width to 100% to make the element fill the available space within its parent element.
Use display: table-cell on the child element to make it behave like a <td> elements.
Use text-align: center and vertical-align: middle on the child element to center it horizontally and vertically.
The outer parent (.container) must have a fixed width and height.

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 vertically and horizontally centers a child element within its parent element, using display: table</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="w3rcontainer"><!-- Comment: Defines a container for the centered child element -->
<div class="center"><span>w3resource.com</span></div><!-- Comment: Defines a div with the class "center" containing a span element -->
</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.
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 w3rcontainer div, there's a center div containing a span element.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.w3rcontainer { /* Comment: Styles the container for the centered child element */
  border: 1px solid orange; /* Comment: Adds a border to the container */
  height: 250px; /* Comment: Sets the height of the container */
  width: 250px; /* Comment: Sets the width of the container */
}

.center { /* Comment: Styles the centering element */
  display: table; /* Comment: Displays the element as a table */
  height: 100%; /* Comment: Sets the height of the element to 100% */
  width: 100%; /* Comment: Sets the width of the element to 100% */
}

.center > span { /* Comment: Styles the span element within the centering element */
  display: table-cell; /* Comment: Displays the span as a table cell */
  text-align: center; /* Comment: Centers the text horizontally within the cell */
  vertical-align: middle; /* Comment: Centers the text vertically within the cell */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.w3rcontainer styles the container for the centered child element, setting its border, height, and width.
.center styles the centering element, setting it to be displayed as a table with full height and width.
.center > span styles the span element within the centering element, displaying it as a table cell and centering its text horizontally and vertically.

HTML-CSS Editor:

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