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,
- HTML5 HELLO WORLD Example
- All directional arrows codes for HTML
- Adding Sub Headings to Bootstrap Header tags
- Create HTML button that looks like a href hyperlink
- 70+ HTTP Error Codes CheatSheet
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- How to set background color in HTML page?
- Obsolete marquee element alternatives html5
- Base 64 Index, Character and Binary Table
- Get HTML table td, tr or th inner content value with id or name attribute
- Align html element at the center of page vertically and horizontally
- How to add multiple spaces between html page text
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- How to pretty print HTML using Java Code
- W3 HTML validator warning Unable to Determine Parse Mode
- Hyperlink in html (anchor tag) without a underline
- reCaptcha Verification expired. Check the checkbox again
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Chessboard with pieces using pure HTML and CSS
- Default speed of Marquee tag : SCROLLAMOUNT
- Fibonacci series from 1 to 500 table
- 9 Border to DIV Element in HTML Examples
- How to remove old 404 pages ulrs from Google crawler
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
More Posts:
- How to install SpaCy (NLP Library) on Mac - Python
- fix fatal: --local can only be used inside a git repository error - Git
- Check Bluetooth is turned on or off on Android device programmatically [Java Code] - Android
- Center align text in TextView Android Programming - Android
- [Android] RuntimeException: Unable to start activity Need BLUETOOTH permission - Android
- Fix - Error:Invalid Gradle JDK configuration found (Android Studio) - Gradle
- SDK Manager: failed to install : Android Studio on Windows - Android-Studio
- The Date Command and its usage [Linux - Unix - macOS] - Linux
