{"id":98,"date":"2017-03-11T04:52:14","date_gmt":"2017-03-11T04:52:14","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=98"},"modified":"2017-10-15T13:38:54","modified_gmt":"2017-10-15T08:08:54","slug":"best-way-to-center-a-on-a-page-vertically-and-horizontally","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/best-way-to-center-a-on-a-page-vertically-and-horizontally\/","title":{"rendered":"[Solved \u2013 3 Answers] Best way to center a <div> on a page vertically and horizontally?"},"content":{"rendered":"

PROBLEM :<\/span><\/strong><\/p>\n

The problem is,<\/p>\n

Best way to center a <div> element on a page both vertically and horizontally?<\/p>\n

Basically, margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?<\/p>\n

SOLUTION 1:\u00a0<\/span><\/p>\n

This solution is the best and most flexible way for\u00a0center a div ( css center div)<\/p>\n

You can check the demo on dabblet.com<\/p>\n

The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, an absolutely positioned element acts the same for distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).<\/p>\n

This trick will work with any sizes of div.<\/p>\n

HTML Code<\/span> <\/div> 
<div><\/div><\/code><\/pre> <\/div>\n
 
 CSS Code<\/span> <\/div> 
div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto;}c<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
SOLUTION 2:\u00a0<\/span>
\nIt is the another Simplest technique to center a div ( css center div) (This method has its implications though, but if you only need to center element regardless of flow of the rest of the content, it’s just fine.)<\/p>\n
Markup:<\/strong><\/p>\n
 
 HTML Code<\/span> <\/div> 
<div>Welcome to wikitechy.com<\/div><\/code><\/pre> <\/div>\n
 
 CSS Code<\/span> <\/div> 
div { background:red; position:absolute; color:#fff; top:50%; left:50%; padding:15px; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} <\/code><\/pre> <\/div>\n
This will center element horizontally and vertically too. No negative margins, just power of transforms.<\/p>\n[ad type=”banner”]\n
SOLUTION 3:\u00a0 <\/span><\/p>\n
In this solution, there are two ways to to center a div ( css center div) through CSS.<\/p>\n
 
 CSS Code<\/span> <\/div> 
.middleDiv { position : absolute;  width : 200px; height : 200px; left : 50%; top : 50%; margin-left : -100px; \/* half of the width *\/ margin-top : -100px; \/* half of the height *\/}<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
[Solved – 3 Answers] HTML – css center div – Best way to center a element on a page both vertically and horizontally? Basically, margin-left:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83400,24],"tags":[3652,83407,37,83405,83403,3650,83401,83402,83404,83408,1399,83406,83410,83409,83412,83411,83413],"class_list":["post-98","post","type-post","status-publish","format-standard","hentry","category-css-2","category-html","tag-align-div-center-bootstrap","tag-bootstrap-div-center","tag-center-div-horizontally-and-vertically","tag-center-div-on-page-bootstrap","tag-center-div-on-page-horizontally","tag-center-div-on-page-vertically","tag-center-div-vertically-and-horizontally-bootstrap","tag-center-div-vertically-and-horizontally-inside-div","tag-center-div-vertically-and-horizontally-responsive","tag-css-div-center","tag-div-align-center","tag-div-center","tag-div-id-page","tag-div-plus-center","tag-div-page-unitbox","tag-divimp-home-page","tag-showpageindivtab"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/98\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=98"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=98"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}