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,
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- remove div vertical scroll
- HTML5 HELLO WORLD Example
- Fibonacci series from 1 to 500 table
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- reCaptcha Verification expired. Check the checkbox again
- Obsolete marquee element alternatives html5
- Default speed of Marquee tag : SCROLLAMOUNT
- How to make a div tag clickable
- Chessboard with pieces using pure HTML and CSS
- Align html element at the center of page vertically and horizontally
- Get HTML table td, tr or th inner content value with id or name attribute
- Hyperlink in html (anchor tag) without a underline
- W3 HTML validator warning Unable to Determine Parse Mode
- How to remove old 404 pages ulrs from Google crawler
- Adding Sub Headings to Bootstrap Header tags
- Remove Html head and body tags from ckeditor source
- How to word wrap in HTML
- W3 : character data is not allowed here html validation error
More Posts:
- Facebook Thanks for stopping by! We hope to see you again soon. - Facebook
- Android EditText Cursor Colour appears to be white - Android
- Disable EditText Cursor Android - Android
- Connection Failed: 1130 PHP MySQL Error - MySQL
- SharePoint Managed Metadata Hidden Taxonomy List - TaxonomyHiddenList - SharePoint
- Execute .bin and .run file Ubuntu Linux - Linux
- Possible outages message Google Webmaster tool - Google
- Android : Remove ListView Separator/divider programmatically or using xml property - Android
- Unable to edit file in Notepad++ - NotepadPlusPlus
- SharePoint PowerShell Merge-SPLogFile filter by time using StartTime EndTime - SharePoint
- SQLite Error: unknown command or invalid arguments: open. Enter .help for help - Android
- JBoss stuck loading JBAS015899: AS 7.1.1.Final Brontes starting - Java
- Android Wifi WPA2/WPA Connects and Disconnects issue - Android
- Android Toolbar example with appcompat_v7 21 - Android
- ERROR x86 emulation currently requires hardware acceleration. Intel HAXM is not installed on this machine - Android