{"id":551,"date":"2016-02-25T20:12:03","date_gmt":"2016-02-25T20:12:03","guid":{"rendered":"http:\/\/www.sebcharrot.com\/blog\/?p=551"},"modified":"2020-01-13T12:28:57","modified_gmt":"2020-01-13T12:28:57","slug":"css-equivalent-center-tag","status":"publish","type":"post","link":"http:\/\/www.sebcharrot.com\/blog\/css-equivalent-center-tag\/","title":{"rendered":"CSS equivalent of the center tag"},"content":{"rendered":"<p><em><strong>Update Jan 2020: <\/strong>Thankfully the landscape has changed a lot since this post, and <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">flexbox<\/a> is now almost certainly the answer.<\/em><\/p>\n<p>Because I understand the temptation to sometimes just wrap a div in a damn &lt;center&gt; tag instead of messing around with auto margins, translatex(-50%), or any other such nonsense &#8212; and also partly as a future reference for myself &#8212; here is what I&#8217;ve found to be the CSS equivalent of the &lt;center&gt; tag.<\/p>\n<pre>.center-dammit {\n    display: block;\n    margin: 0 auto;\n    text-align: center;\n}\n<\/pre>\n<p><strong>Caveat<\/strong>: I&#8217;ve not checked in depth so I&#8217;m sure there will be about a dozen exceptions. W3C, please sort this out for CSS4!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update Jan 2020: Thankfully the landscape has changed a lot since this post, and flexbox is now almost certainly the answer. Because I understand the temptation to sometimes just wrap a div in a damn &lt;center&gt; tag instead of messing around with auto margins, translatex(-50%), or any other such nonsense &#8212; and also partly as&hellip;&nbsp;<a href=\"http:\/\/www.sebcharrot.com\/blog\/css-equivalent-center-tag\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">CSS equivalent of the center tag<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":""},"categories":[23,18],"tags":[60,168,183],"_links":{"self":[{"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/posts\/551"}],"collection":[{"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":2,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"predecessor-version":[{"id":688,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/posts\/551\/revisions\/688"}],"wp:attachment":[{"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.sebcharrot.com\/blog\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}