To align any element of HTML (div, image tag, links, paragraph tag, spans, etc) or nested elements at the middle of the page i.e. at the center both vertically and horizontally we need to use the following CSS attributes to the parent element.
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align:center;
width: 200px;
height: 20px;<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.parent {
color:#444444;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align:center;
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<h1>HTML element at the middle of the page</h1>
<div class="parent">
<h2>Hello world!!</h2>
</div>
</body>
</html> More Posts related to Html,
- What is the doctype for HTML5?
- Adding Sub Headings to Bootstrap Header tags
- All directional arrows codes for HTML
- Remove Html head and body tags from ckeditor source
- Hyperlink in html (anchor tag) without a underline
- remove div vertical scroll
- Fibonacci series from 1 to 500 table
- How to remove old 404 pages ulrs from Google crawler
- HTML, HTML5. CSS, CSS3 Color Codes 2020
- Default speed of Marquee tag : SCROLLAMOUNT
More Posts:
- SharePoint Server 2016 IT Preview Deprecated Removed features - SharePoint
- How to make jsfiddle bootstrap ready - CSS
- How to enable line numbers in Eclipse - Eclipse
- Parsing Data for android-21 failed unsupported major.minor version 51.0 - Android
- SDK Manager: failed to install : Android Studio on Windows - Android-Studio
- Remove ActionBar from Activity that extends appcompat-v7 - Android
- Loading previous page using html button using JavaScript - JavaScript
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu - CSS
- Calculate Area and Circumference of Circle - C-Program
- Gmail Error Bad Request Your client has issued a malformed or illegal request - Google
- How to Apply Themes to Notepad++ - NotepadPlusPlus
- [Solved] SharePoint Access Denied error editing Document Name - SharePoint
- Calculate Volume of Cube - C-Program
- The service instance "Microsoft SharePoint Insights" could not be provisioned because of the following error: Authentication information for SPInsights service has not been set yet - SharePoint
- Use Netbeans keyboard shortcuts in Android Studio - Android-Studio