Click here to Skip to main content
15,882,055 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, I am trying to recreate this view in pure HTML and CSS: Screenshot. Unfortunately I cannot get it to display in middle of the screen, it shows like this, in bottom right corner and off-centered: how it looks right now .

What I have tried:

My code right now:
<!DOCTYPE html>
  <title>Unsupported browser</title>

<div style="width: 100px; height: 100px; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; white-space: nowrap;">
 <img src="./rocklogo.png" width="600" height="">
<h1 style="font-weight: bold; font-size: 50px;">Please visit our website in another browser</h1>
<p>The browser you are using is no longer supported by us.</p>
<p>To get the best website experience and use of our online tools</p>
<p>please update to on of the browsers listed below:</p>
<div id="icons" style="display: flex; flex-direction: row; gap: 20px;">
    <img src="./Google_Chrome_icon_(February_2022).svg.png" alt="Chrome" width="100" height="100">
    <img src="./Firefox_logo,_2019.svg" alt="Firefox" width="100" height="100">
    <img src="./Microsoft_Edge_logo_(2019).svg.png" alt="Edge" width="100" height="100">
    <img src="./Opera_2015_icon.svg.png" alt="Opera" width="100" height="100">

Does anyone have any tips how to fix this?
Updated 3-Jun-22 0:05am

1 solution

Did you try Google Search? I used: how to centre a div[^] and found many solutions.

First one is: 11 Ways to Center Div or Text in Div in CSS[^]

Choose the method that you like best.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900