Answer: You can use layouts like Flex-box to center an element horizontally in HTML.
HTML (Hypertext Markup Language) creates the structure of a webpage. Centering an element horizontally on the web page is important for visual balance, focus attention, and improving the readability of content. Few more methods are available to horizontally center an element like a Grid layout and properties like margin: auto, position absolute, etc.. We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Horizontally Center an Element in HTML
Using the HTML elements and CSS properties we can center the element horizontally. Here are some most common methods to center the elements.
Method 1: Using grid layout to Horizontally Center an Element in HTML
Grid layout provides a two-dimensional system, this means it can handle both rows and columns. You can use the CSS grid layout tool to center an element on the Web page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Example</title>
<style>
.container {
display: grid;
place-items: center; /* Centers both horizontally and vertically */
height: 100vh;
background-color: white;
}
.centered {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
centered element using Grid.
</div>
</div>
</body>
</html>
Output:
Explanation:
- This HTML code creates a simple page with a centered element using a CSS grid layout.
- The .container class centers the content horizontally and .centered class style the inner content
Method 2: Using Flex-box to Center the Element Horizontally in HTML
The flexible box is said to be the Flex-box in short, where it provides a one-dimensional system and is perfect for aligning items in rows or columns. So here you can use the flex-box to center the element horizontally.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
}
.centered {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
centered element using Flexbox.
</div>
</div>
</body>
</html>
Output:
Explanation:
- This HTML code creates a simple page with a centered element using a Flex-box layout
- The flex-box .container class centers the element horizontally and .centered class style the inner content
Method 3: Using margin:auto to Horizontally Center the Element
You can use the margin: auto CSS property to center the block-level elements horizontally within the container.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Margin Auto</title>
<style>
.container {
width: 60%;
background-color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.centered {
width: 50%;
margin: auto;
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
Centered element using margin: auto.
</div>
</div>
</body>
</html>
Output:
Explanation:
- The .container class is used to center horizontally and the .centered is used to style the content inside the container.
- The margin: auto centers the element horizontally within the parent element.
Method 4: Using position: absolute to Horizontally Center the Element
You can use position: absolute to place the element precisely on the Web page. When you are using position: absolute the element gets placed in the position, closest to the positioned ancestor.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Example</title>
<style>
.container {
position: relative;
height: 100ch;
background-color: white;
}
.centered {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
Centered element using absolute positioning.
</div>
</div>
</body>
</html>
Output:
Explanation:
- The container has a height of 100% of the viewport and its position is relative to the child elements.
- The centered element is positioned absolutely inside the container, moved to center by left: 50% and transform: translateX(-50%);
Method 5: Using text-align: center, text-align: left, and text-align: right to Horizontally Center the Element
You can use the text-align property to center the element horizontally in the container. The text-align: left property makes the text aligned to the left of the container, the text-align: right makes the text aligned to the right side, and the text-align: center, centers the text in the container.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment Example</title>
<style>
.container {
width: 40%;
background-color: white;
padding: 20px;
}
.left-align {
text-align: left; /* Aligns text to the left */
background-color: lightblue;
padding: 10px;
}
.center-align {
text-align: center;
background-color: lightblue;
padding: 10px;
}
.right-align {
text-align: right;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-align">
aligned to the left.
</div>
<div class="center-align">
text is centered.
</div>
<div class="right-align">
aligned to the right.
</div>
</div>
</body>
</html>
Output:
Explanation:
- The container class is used to create the container with 40% width and 20px padding.
- The .left-align, .center-align, and .right-align are used to align the text left, center, and right respectively.
Method 6: Using float: right and float: left to Center the Element Horizontally
The `float` property in CSS moves elements to the left or right of their container, making the text and other inline elements flow around them.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Left and Right Example</title>
<style>
.container {
width: 50%;
background-color: white;
padding: 20px;
}
.left-align {
width: 200px;
float: left;
background-color: lightblue;
margin-right: 10px;
padding: 20px;
text-align: center;
}
.right-align {
width: 200px;
float: right;
background-color: lightcoral;
margin-left: 10px;
padding: 20px;
text-align: center;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left-align">
This div is aligned to the left.
</div>
<div class="right-align">
This div is aligned to the right.
</div>
</body>
</html>
Output :
Explanation:
- The .container class style the container with a width of 50% and padding of 20px.
- The left-align class aligns the element to be positioned at left and the right-align class aligns the element to be positioned at right
Method 7: Using margin: 0 auto to center the Element Horizontally
You can use margin: 0 auto to work with basic-level elements with the specified width, which sets equal right and left margins.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Using Margin Auto</title>
<style>
.container {
width: 90%;
background-color: white;
padding: 20px;
}
.centered {
width: 300px; /* Width is needed */
margin: 0 auto; /* Horizontally centers the div */
background-color: lightblue;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
This div is horizontally centered using margin: 0 auto.
</div>
</div>
</body>
</html>
Output :
Explanation:
- The container class styles the container with a width of 90% and padding of 20px.
- The margin: 0 auto centers the element horizontally inside the container. The class .centered styles the container inside.
Method 8: Using the display: table method to Center the Element Horizontally
You can use display: table and the child element display: table-cell to horizontally center the child element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Using Table Display</title>
<style>
.container {
display: table;
width: 50%;
background-color: white;
padding: 20px;
}
.centered {
display: table-cell;
text-align: center;
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered">
This div is horizontally centered using a table-cell display.
</div>
</div>
</body>
</html>
Output:
Explanation:
- The container acts like a table and is styled with a width of 50% and padding of 20px.
- The centered element acts like a table cell with centered text.
Conclusion
The above-discussed methods are used to center an element horizontally. The methods are Grid Layout provides a 2D system, Flexbox provides a 1D system to align the row or column, `margin: auto` is used to center block-level elements, and `position: absolute` to place the element precisely. These techniques will ensure the contents on your Web page look more readable.