Place the image in the center both vertically and horizontally

In my projects, I often utilize content placed above a div element to create space and structure. However, for this particular project, I am facing a challenge. I need to center a single image both horizontally and vertically within the page with no other elements present.

Despite conducting thorough research, I have been unable to find a solution that works effectively. Can anyone offer assistance?

Below is the basic HTML code:

<div id="entpa">
    <section id="mainContAPos">
    </section>
</div>

And here is the CSS code I have implemented:

body{
  background-color: #0D0D0D;
}

#entpa{
  position: absolute;
}

#mainContAPos{
  position: fixed;
  vertical-align: middle;
  background-image: url('frontpage1366.png');
  width: 1366px;
  height: 768px;
  border: 8px solid #FFF4CF;
  border-radius: 16px;
}

Answer №1

Give this a try:

HTML (no modifications)

 <div id="entpa">
    <section id="mainContAPos"></section>
 </div>

CSS

html, body { height: 100%; }

#entpa {
     display: flex;
     justify-content: center; /* horizontally center child div */
     align-items: center; /* vertically center child div */
     height: 100%;
     /* position: absolute; COMMENT OUT; not needed */
 }

 #mainContAPos{
     /* vertical-align: middle; REMOVE; unnecessary */
     background-image: url('frontpage1366.png');
     width: 1366px;
     height: 768px;
     border: 8px solid #FFF4CF;
     border-radius: 16px;
  }

Demo: http://jsfiddle.net/qxmLk1j6/

Keep in mind that most browsers support flexbox, excluding IE 8 & 9.

To learn more about CSS Flexbox, check out:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for merging multiple video files into a single video on a website

My current setup involves using an rtmp flowplayer to play multiple videos seamlessly through flash. However, I've encountered an issue where this functionality does not work on devices like the iPad or iPhone. ...

Send HTML table information from view to Controller action in ASP.NET Core by converting it to a list

Encountering issues with null values in the controller action method, preventing table data rows from being looped through. Model: class: public class Generation { public int Generation1Count { get; set; } public int Generation1TotalS ...

In Google Chrome, the edges of hexagons appear jagged and not smooth

I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...

"Stored on the server: A preview of a musical masterpiece

I am working on a website concept where users can preview a 30-second snippet of a song before making a purchase decision. My plan is to store all the mp3 files below the root folder to prevent direct access. My main concern is whether I can enable the 30 ...

JavaScript isn't cooperating with a straightforward .click() command

Having some trouble clicking a div using JavaScript in my project. I am able to utilize jQuery, and have tried selecting the element with QuerySelector as well as XPath, followed by utilizing .click() on the element. However, it seems that the div is not b ...

Issues with JQuery scroll() / scrollTop() functionality in Internet Explorer and Firefox

Our current script showcases a dotted line starting from the top of the screen leading to an up arrow. The position of the arrow changes based on how far the user has scrolled down the page, allowing them to click on the arrow and scroll back to the top. W ...

Free Image Gallery software solution

Looking for a recommendation on an open-source image gallery for our website. Planning to use PHP, Python, or Ruby with a MySQL backend if needed. It's for a Sailing Club, so I need something where certain members can create folders for each day out a ...

Troubleshooting Google Tag Manager in Google Tag Assistant with the GTM script enclosed in an iframe on a separate domain

Recently, I have encountered a strange problem with the GTM's debugging feature. It was working perfectly fine before the interface got revamped. Previously, all I needed to do was enter the URL of the website and the debugger would successfully conn ...

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...

Does CSS media query "@media only screen" only work when I am resizing the window?

I recently encountered an issue with the code found on this website (the repository can be viewed on Github here): @media only screen and (max-width: 600px) { img {width: 100%; height: 100%; margin: 0; padding: 0; } a.box { width: 100%; pa ...

Is it possible to retrieve the characteristics of a jquery-cloned element in a javascript function?

I am looking to empower my users to generate new categories, branches, and sub-branches dynamically. To facilitate this functionality, I have constructed an HTML table containing multiple nested tables, each enclosed within its own div. The primary categor ...

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

Difficulty fetching css files on handlebars (express API)

Recently, I encountered an issue where the CSS styles were not being applied to my HBS code despite several attempts. The structure of my service is as follows: Service Controllers Models public css styles.css Routers Views index.hbs app.js pac ...

Arrange elements in a half-moon shape with CSS and HTML

I am in the process of designing a webpage that will showcase 5 rounded components, each with different sizes, arranged in a semi-circle pattern. I have included an image to give an idea of how I want the layout to appear, with placeholder circles indicati ...

Showcasing all elements of an xml through jquery while implementing a filter

Trying to implement a filter on XML using jQuery. The filtered results are showing based on the condition, but facing difficulty in displaying all XML items when the flag is set to 0; meaning that when the flag is zero, all XML items should be displayed ...

Position one div on top of another div with no gaps between them

I want to position a div element so that the bottom half overlaps another div element. You can view a basic layout here When the transform property is enabled for .overlay, the element is moved halfway down but it also shows the white space of the parent ...

Using -webkit-transform with varying transition durations for rotateX and rotateY properties

Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for ...

Creating a dynamic animation for a button in AngularJS

I'm having some trouble applying animations to an angular js button using traditional CSS and JS methods. Specifically, I'm attempting to include an opacity animation on the button. Can someone offer assistance? HTML <span id="sign_btn"> ...

Is it possible to produce data on the server and then transmit it to the client?

Can you provide guidance on creating a webpage that prompts a python script to run on the server, and then displays the output of the script back in the browser? I'm put time into researching and seeking assistance during my web programming course. A ...