Place a div within a parent div using percentage values for positioning

I am currently working on a CSS scene creation project and utilizing position: relative and position:absolute. However, I am facing an issue with trying to position my child div at the center of its parent div using various CSS properties.

This is what I have implemented:

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;}

.fish {
  height: 320px;
  width: 300px;
  position: absolute; // Setting position as absolute
  transform-origin: center; // Attempting to set the origin of the div to be centered.
  top: 50%; // Trying to vertically center the child div within the parent div.
  left: 50%; // Similarly, attempting horizontal centering.
  z-index: 10000;
  background-color: #10121b;}

However, here is the result produced: https://i.sstatic.net/cYvR4.png

Please note that my div .game itself is a child of another div. Feel free to ask if you require further details regarding my HTML or CSS structure.

csscss-positionscene

Answer №1

element, you can simply include the following code snippet to modify the .fish div:

Enhance it by adding:

transform: translate(-50%, -50%);

Answer №2

To achieve the desired centering effect, utilize flexbox

.game {
  background-color: #5386e4;
  overflow: hidden;
  position: relative;
  height: 560;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fish {
  height: 320px;
  width: 300px;
  background-color: #10121b;
}

Set the "display" property to "flex" and then use "justify-content" with a value of "center" and "align-items" with a value of "center" to perfectly center the child container

Answer №3

To center a div, you can utilize the transform property:

.ocean {
      height: 400px;
      width: 500px;
      position: relative;
      transform-origin: center; // This sets the origin of the div in its center.
      top: 50%;  // Vertically centers the child div inside the parent div.
      left: 50%; // Horizontally centers the child div inside the parent div.
      transform: translate(-50%, -50%);
      z-index: 1000;
      background-color: #304255;
    }

Alternatively, you could make the parent div use flex and apply flex-wrap: wrap;, justify-content:center;, and align-items:center; without making the child div absolute.

Answer №4

Use the grid property to easily center elements by using place-content:center;

Ensure that the parent element has sufficient height to properly center its child elements.

body {
    display: grid;
    min-height: 100vh;
    margin: 0;
}
.game {
    background-color: #5386e4;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
}

.fish {
    height: 320px;
    width: 300px;
    background-color: #10121b;
}
<body>
    <div class="game">
        <div class="fish"></div>
    </div>
</body>

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

Prevent divs from jumping to a new line with the float property

I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at ...

htmlcss

Steer clear of using grey backgrounds for anchors/links in IE 10

What is the best way to prevent the irritating grey background that appears on anchors in IE 10 when they are clicked? ...

cssstylesanchorinternet-explorer-10

Setting the distance between marks on a material-ui slider is a handy customization feature to

I have customized a material-ui slider with some custom CSS and it is contained within a div of small width, requiring overflowX. How can I maintain a 5px margin between each mark on the slider? Check out the demo here https://i.sstatic.net/bxiXE.png Th ...

javascripthtmlcssreactjsmaterial-ui

The slideUp and slideDown functions are not functioning properly

Whenever a user clicks on image-exp, I want description-exp to slide down while other description-exp slides up. I am currently using a Bootstrap template available at this link. To demonstrate the issue, I created a JSFiddle that can be accessed here. H ...

jquerycsstwitter-bootstrap

What's the best way to use CSS for making a linear gradient that spans horizontally and includes several different color transitions

When I use the following code: <style> h1 { height: 200px; background: linear-gradient(red, green, blue); } </style> I get the standard color spectrum with horizontal lines. Now, I want to change it so that the lines are vertical. I& ...

htmlcss

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

htmlcssframeworks

Creating responsive designs for high resolution screens using media queries in HTML

I'm curious about how to implement media queries for high-resolution screens such as 4k, 5k, and retina displays. I've been researching this topic and have found that resolution-specific media queries can be used. However, I am unsure of how to d ...

cssmedia-queriesretina-display

The Bootstrap 4 Dropdown Menu is positioned on the right side of its parent element

Just started using Bootstrap and have a query regarding my Navbar design. Check out my trial website at TEST-DOMAIN Currently utilizing Bootstrap 4.3.1 along with JQuery 3.4.1. The menu looks perfect on Desktop view. The dropdown displays as expected. I ...

cssbootstrap-4

How to adjust the height of a custom component in Angular

I am attempting to modify the height of a component within my library that includes a table. Despite my efforts, I am unable to adjust the height of the lib-table element. Here is a snippet of the component structure: <div class"table-wrap"&g ...

htmlcssangularangular-componentsangular-library

The final element within the container spills over, leaving only a portion visible to the eye

Currently, I am optimizing my website for mobile browsers. To do this, I used Chrome Dev Tools to test it on a screen size of 320 x 568, but I encountered an issue. The problem is that the button element within the div is positioned at the bottom, but onl ...

cssmobilebootstrap-4mdbootstrap

Dividing one SVG into Multiple SVGs

I'm facing a challenge with loading an SVG overlay on a Google Map. The SVG file is quite large, about 50mb, resulting in a delay of around 10 seconds for it to load in the browser. One solution I'm considering is splitting the SVG into 171 smal ...

javascripthtmlcssgoogle-mapssvg

JavaScript rejects the request to activate the menu

Struggling to implement a side menu in CSS? This website might be able to help: I've hit a roadblock. After following the instructions from the provided link, I now have an unexpected '>' symbol at the top of my webpage. Despite this, th ...

jquerycsshtmlweb

Achieve full height for nested children within a container of varying height without using flexbox

Inside a container of variable height, I have multiple nested lists that I want to take up all the available space. I attempted to use flexbox for this purpose, but performance issues arose in Chrome, FF, and Safari when dynamically adding more nested lis ...

htmlcss

How is the color of the browser tab determined in Bootstrap?

I've been searching through Bootstrap documentation and Stack Overflow, but I haven't been able to find the answer I'm looking for. It seems like the main theme color, displaying differently in various browsers by tinting the tab bar. In S ...

cssbootstrap-5

Is there a way to hide the borders between cells within these divs?

I am working on an application screen using Vue.js and facing an issue with the divisions between cells. I want to hide these divisions so that the lines of the items appear continuous. I attempted to modify the classes of the columns to "col-md" and "col ...

javascripthtmlcssvue.jsbootstrap-4

What is the reason for the discrepancy in actual size of <input type="text"> compared to the specified size

Let's analyze the following code snippet: <div style="width: 10em; float: left; padding: 0; margin: 0"> <input type="text" style="width: 10em"/> </div> The text field in this code does not fill up the entire parent DIV as one mig ...

csshtmlinput

What is the process of adding a source map for a CSS minification script generated by a gulp task?

Currently, I am focused on optimizing CSS minification through the use of gulp. An issue arises when trying to debug CSS, as all stylesheets are contained within knx.dev.css. It is necessary to implement a solution that allows for easy tracing back to the ...

cssgulppackage.json

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

htmlcsssearch

Diminish four characters from a word and keep only the letter "H"

Is it possible to remove the letters "ello" from the word "Hello" as it zooms out? I want the letters "e," "l," "l," and "o" to fade out when steps 6 and 7 of my code are reached, while only the letter "H" moves towards the top left corner. // 6. Zoom ou ...

javascriptjquerycss

Make menu links stretch to match parent's width

Trying to set the dropdown submenu links in my navigation bar to match the width of their parent <li>, but it's proving to be more challenging than I expected. Below is the code: HTML: <div id="navbar" class="navbar"> <nav id="site ...

htmlcssdrop-down-menuwidthsubmenu