0

Whenever you open an image in chrome, it displays it in a dark background with vertically and horizontally centered. I just wondered which CSS properties Chrome uses to achieve that. Chrome just uses

body{height:100%;} img{margin:auto, display:block}

https://i.giphy.com/media/UqUHuT6y9mK5HfsYFm/giphy.webp

inspect this sample link. The problem is it doesn't work when you apply the same rules. Do I miss something? Also I did not see before vertically aligning an image with margin:auto.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
yigitt
  • 778
  • 3
  • 9
  • 16
  • 1
    set html {height:100%;} – zainhassan Feb 07 '22 at 18:15
  • 1
    Also see: [What's the difference between margin:auto and justify-content / align-items center?](https://stackoverflow.com/questions/44244549/whats-the-difference-between-marginauto-and-justify-content-align-items-cent). When the parent has `display: flex`, an only child can use `margin: auto` to align itself both horizontally and vertically. [Flexbox auto margins documentation](https://www.w3.org/TR/css-flexbox-1/#auto-margins) – D M Feb 07 '22 at 18:18
  • @zainhassan Yeah I totally missed html height. – yigitt Feb 07 '22 at 18:51
  • @DM Thanks for the link. I didnt know flex. I also learned {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);} this works fine too – yigitt Feb 07 '22 at 18:53

1 Answers1

0

This alignment is done internally by Chrome rather than by using CSS.

If you look at the URL when you open a local file, Chrome uses file:/// rather than a standard http(s):// URL, which Chrome detects and adjusts the layout accordingly.

Quite misleading that they have the inline CSS on the elements when it's done internally, but the layout you talk about isn't achievable with only the CSS specified above.

The default HTML when rendering an image file directly is below and as you can see it has inline style attributes on the body/img tags, but the same HTML in a standalone document renders the image in the top left corner.

UPDATE

The CSS does seem to be affecting the layout, but the same CSS in a standalone HTML document does not layout the page with the content/image vertically and/or horizontally centred.

<html style="height: 100%;">
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <title>the-head.png (700×467)</title>
  </head>
  <body style="margin: 0px; background: #0e0e0e; height: 100%">
    <img style="-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="file:///C:/Users/djalx/Pictures/the-head.png">
  </body>
</html>
Alex Ander
  • 1,430
  • 12
  • 19
  • Actually it is not misleading or surpising that they still use CSS. It is called UA (User Agent) which is a default stylesheet. every browser has one as otherwise websites would fail to laod if not all proeprties would be declared. All UA uses the W3C standardswhile also adding their own error correctionc methods. Thats also the reason why some browser behave differently. On top of that come then the render engine (webkit as example) – tacoshy Feb 07 '22 at 18:17
  • Actually, the CSS I meant was the inline CSS that Chrome automatically adds to the body/img elements NOT the default styling rules which normally apply to the tags themselves. – Alex Ander Feb 07 '22 at 18:21
  • @AlexScott its called user agent stylesheet. Browser defaults for html elements. The thing is user agent style sheet apllies very basic styling like body having 16px margin and default font-family etc. Chrome cannot style image elements to have dark background and vertically aligned by default. Otherwise all image tags added by users will show like dark background and centered in screen. You can also check chrome user agent stylesheet here trac.webkit.org/browser/trunk/Source/WebCore/css/html.css – yigitt Feb 08 '22 at 05:09
  • Chrome User Agent Stylesheet http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css – yigitt Feb 08 '22 at 09:28
  • I know what a user agent stylesheet is, but the point I'm trying to make seems to be getting missed. – Alex Ander Feb 08 '22 at 11:01
  • The point is, it's NOT JUST THE CSS making the image display in the centre so the layout can't be replicated with THAT CSS BY ITSELF. Chrome is adding extra styling to the body/image tag WITHOUT ACTUALLY APPLYING THE CSS CLASSES THAT WOULD NORMALLY BE REQUIRED TO CREATE THAT LAYOUT. Copy and paste the code from inspecting source into a standalone document, load it in Chrome and the layout will be different in the sense that the image will be in the top-left rather than centred. Therefore, other modifications to the layout are made internally by Chrome based off the fact it is a `file:///` – Alex Ander Feb 08 '22 at 11:02
  • I understand that. but images you open on internet, do not have `file:///` path yet they are still being styled same. You can check my sample image's path `````` – yigitt Feb 08 '22 at 11:34
  • 1
    It could go off the file extension too, or the mime type of the document that's loaded, but when an image is loaded through a HTML document, the layout mentioned isn't achievable without further CSS. – Alex Ander Feb 08 '22 at 14:13