Screen Center Finder
Mark the centre of the browser viewport with a full-screen crosshair, centre lines, diagonals, rule-of-thirds, golden ratio and safe-area guides. See the centre's pixel coordinates and design your own crosshair. Free, runs in your browser.
Centre finder
Pick the guides you want, style the crosshair, then open the full-screen overlay. The preview below shows the same layout, scaled to this card.
Layers
Crosshair designer
Colour
In the overlay: C crosshair, L centre lines, D diagonals, T thirds, G golden ratio, S safe areas, I readout, B background, H shows this help, Esc exits. The X at the top right stays visible. A web page cannot draw on top of other apps or games, so use the overlay to line up hardware, not as an in-game crosshair.
How to use a screen centre finder
Mount a TV level and centred
Hang the TV and open this page in a browser on that screen, then turn on centre lines and diagonals. The crosshair is the middle of the viewport, not a reading of the bezel. Measure from the wall or furniture to that crosshair. Bezels are often uneven, and a stand or logo can make the outer frame look off the pixel centre. Put a spirit level along the horizontal line, then adjust the bracket until both sides measure the same. The safe-area boxes show where broadcast graphics and subtitles sit, which helps when you want those at eye level.
Line up dual monitors and centre a webcam
Open the overlay on each monitor in turn and put a small piece of tape where the vertical line meets the bezel. That line is the middle of the viewport on the screen showing the page, not a measurement past the bezel. Raise or tilt the screens until the horizontal lines meet at the same height, so your cursor and eyes move straight across. For a webcam, clip it on top and slide it until it sits directly above the vertical line. If it sits off to one side, you look away from the camera in every call.
Composition grids for photos and streams
The rule-of-thirds grid splits the viewport at 33% and 67%; the golden ratio grid sits at about 38% and 62%. Use them to place a face cam, chat box or title when planning a stream layout, or to check a photo framing on a big display. A camera with its own grid draws the same lines.
Why the centre can fall between two pixels
Pixels are numbered from 0. A screen 1920 pixels wide has no single middle pixel: the centre is the edge between pixel 959 and pixel 960. Only an odd width, such as 1919, has one exact centre pixel. A 1 pixel line on an even screen therefore sits half a pixel off, which is why the readout tells you which case you have. Scaling adds another twist: at 125% or 150% the browser's CSS pixels do not map to whole device pixels, so this tool draws in device pixels and snaps every line to the grid. Compare the reported CSS size and device pixels with what is my screen size.
Related tools
- What Is My Screen Size: reported CSS resolution, pixel ratio and viewport. Inches need a diagonal or a card match.
- Display Test: a full set of patterns to check a new monitor.
- Aspect Ratio Calculator: work out widths and heights for 16:9, 21:9 and more.
- Viewport Size Tester: see the live browser viewport size and CSS breakpoint.
Frequently asked questions
Does this find the centre of the monitor panel?
No. The crosshair is placed at half the width and half the height of the element it is drawn in. On this page that element is the browser viewport. The overlay covers that same viewport. Full screen, when the browser allows it, is requested on the document element, so the viewport grows to fill the screen. If full screen is blocked, the mark still sits in the browser window. The preview uses the same fractions inside its own box. A browser cannot see the bezel. The size under the readout is only the CSS-pixel size the screen reports.
How do I leave the full-screen overlay?
Press Esc, or use the X at the top right. The X stays visible and can be tapped after the shortcut hint fades, about two seconds after you open the overlay or press a shortcut. Closing the overlay also leaves full screen when this page entered it. If the browser blocked full screen, the overlay is only a layer over the page, and Esc or the X still closes it. A click on the picture does not close it.
What do the grids show?
Centre lines run through the middle of the viewport. Diagonals run from corner to corner and cross at that same point. Rule of thirds draws lines at one third and two thirds of the width and height. Golden ratio draws lines at about 38.2% and 61.8%, from one over phi squared. Safe areas are dashed boxes at 90% (labelled action safe) and 80% (labelled title safe), centred on the same midpoint. The crosshair is short arms around that midpoint, using the arm length, thickness, gap, colour, dot and outline you set.
Why can the centre fall between two pixels?
Device pixels are numbered from 0. An even count has no single middle pixel. A width of 1920 has its centre on the edge between pixel 959 and pixel 960. An odd width, such as 1919, has one exact centre pixel. The centre column and centre row say which case you have. Lines are drawn in device pixels and snapped to that grid, because a CSS pixel at 125% or 150% zoom is not always one device pixel.
What do the coordinate numbers mean?
Viewport is the window inner width and height in CSS pixels. Centre (CSS) is half of each. Device pixels are that CSS size times the device pixel ratio, rounded. Centre (device) is half of those device pixels. Those lines stay hidden until the page has measured the window, so no coordinate is shown before that. The numbers describe the viewport, not the panel.
Can I use this crosshair over a game?
No. A web page cannot draw on top of other apps or games. Use the overlay to line up a monitor, a TV or a webcam. While it is open, C toggles the crosshair, L the centre lines, D the diagonals, T the thirds, G the golden ratio, S the safe areas and I the readout. B cycles the background. H or Space shows the hint again. Esc exits.