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
- HTML5 HELLO WORLD Example
- What is the doctype for HTML5?
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- W3 : character data is not allowed here html validation error
- HTML, HTML5. CSS, CSS3 Color Codes 2020
- Obsolete marquee element alternatives html5
- Create HTML button that looks like a href hyperlink
- All directional arrows codes for HTML
- Adding Sub Headings to Bootstrap Header tags
- Hyperlink in html (anchor tag) without a underline
- Align html element at the center of page vertically and horizontally
- How to remove old 404 pages ulrs from Google crawler
- How to set background color in HTML page?
- Default speed of Marquee tag : SCROLLAMOUNT
- W3 HTML validator warning Unable to Determine Parse Mode
- Get HTML table td, tr or th inner content value with id or name attribute
- reCaptcha Verification expired. Check the checkbox again
- How to word wrap in HTML
- Base 64 Index, Character and Binary Table
- Fibonacci series from 1 to 500 table
- How to make a div tag clickable
- Remove Html head and body tags from ckeditor source
- remove div vertical scroll
- Chessboard with pieces using pure HTML and CSS
More Posts:
- Struts2 : java.lang.ClassNotFoundException: org.apache.commons.fileupload.RequestContext - Java
- Upload Pdf file using PHP Script - PHP
- How to Gzip a file directory on Mac OS X using Terminal Command - Mac-OS-X
- Get-ADUser PowerShell - Get AD user details using email address - SharePoint
- How to Import External Jars to Android Studio 1.0.1 Project - Android-Studio
- How to destroy PHP session() - PHP
- Add Blank Lines Between Each Lines in Notepad++ - NotepadPlusPlus
- Take Screenshot on Mac OS X (Keyboard Shortcuts) - Mac-OS-X
- How to remove blank lines from a file using Notepad++ - NotepadPlusPlus
- Calculate Area of ellipse - C-Program
- SharePoint 2010 DataForm Unable to display this Web Part System.StackOverflowException - SharePoint
- SwissCovid App Launched in Switzerland - News
- ASCII to HEX and HEX to ASCII Conversion Notepad++ - NotepadPlusPlus
- Android : Duplicate registration for activity com.example.abc - Android
- Android Emulator Soft Back button action using Computer keyboard - Android