Place the child in the center of the parent container without any specified height or width

I am in the process of developing a popover system that consists of two main divs: the popover-container and the popover. The container is a small 0px by 0px sized div responsible for positioning relative to the page. My objective is to have the child popover centered within its parent so that it appears in the middle.

<div class="popover-overlay">
  <div class="popover-container" style="left: 40px;top: 40px;">
    <div class="popover shadow_card-light"></div>
  </div>
</div>

.popover-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  pointer-events: none;
}

.popover-container {
  position: absolute;
  width: 0px;
  height: 0px;
}

.popover {
  min-height: 20px;
  min-width: 50px;
  background: white;
  border-radius: 3px;
  overflow: hidden;
  top: 10px;
}

The current placement of the elements resembles this view (the circle represents the container, while the rectangle symbolizes the actual popover visible to users)

https://i.sstatic.net/rzBB0.png

My desired goal is to achieve this type of alignment:

https://i.sstatic.net/EzXfz.png

I have experimented with various centering techniques such as flex centering and margin centering, but have not succeeded in achieving the desired outcome.

htmlcss

Answer №1

It seems like this might be the solution you are looking for. Your question was a bit unclear, but I hope this helps.

We have centered the child element horizontally using a clever trick for absolute horizontal centering. Here's the code:

.element{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Check out this link for more information: http://codepen.io/diego-fortes/pen/woGeBE

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

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Arrange five columns in a bootstrap layout with the first column aligned to the left, the last column aligned to the right, and the remaining columns spaced

I am looking to update my template that was originally created using bootstrap 3.3. There is a div with the following classes: col-md-offset-2 col-md-8 Within this div, there are two rows. The second row will have five social media icons, but I am struggl ...

csstwitter-bootstrap

What is the best way to include a background image in an Angular selector?

I'm having trouble setting a background image for an Angular selector. Here's the code I'm using: <app-highway-card [ngStyle]="{'background-image':'url(https://cdn.pixabay.com/photo/2021/09/04/09/32/road-6597404__340.j ...

htmlcssangularbackground-image

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Currently, I am working on developing a shopping cart website and I am new to using Jquery. My layout involves the need to increment and decrement values by one when the plus and minus button is pressed. Additionally, the total price value should also be a ...

jqueryhtmlcss

Ways to enable users to use the keyboard tab to navigate and choose hidden checkboxes with labels that are visible

I am currently configuring "card" style checkboxes where there are three hidden checkboxes (opacity: 0) with corresponding labels displayed as boxes with backgrounds. Clicking on the label selects the checkbox and changes its label to a blue background. E ...

htmlcssaccessibility

Are PostbackUrl and Form.Submit the same thing?

Recently, I took over a project that utilized form submissions to send data. Unfortunately, I am not well-versed in how forms work. It seems like such an outdated way of submitting data. Moreover, converting these forms into MasterPages causes them to brea ...

asp.nethtml

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

javascripthtmlcssbootstrap-4

What is the best way to comprehend a fixed div with both left and right margins?

Some say that a fixed div is essentially removed from the entire page and maintains a fixed connection to the client window. I believed this was straightforward until I came across the leading answer in this thread. In that scenario, the fixed div's r ...

css

Shifting elements within a modal using AngularJS and CSS: Swapping one div out for another

I am currently developing an application and I am considering using AngularJs for this purpose: <div class="main"> <div class="one">Content 1 goes here ...</div> <div class="two">Content 2 goes here ...</div> </div> Wi ...

javascripthtmlcssangularjs

Adding a div with a canvas element is malfunctioning

I've been experimenting with using canvg to convert an SVG within a div into a canvas. So far, the conversion is working fine but when I try to copy the innerHTML of the div to another div, it's not functioning properly. The canvas is being gener ...

javascriptjqueryhtmlcanvascanvg

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

javascriptphpjqueryhtmlajax

The fundamental element in CSS for structuring and styling web

What distinguishes the selector patterns E * F and E F? Both selectors apply the appropriate style to element F which is a child of element E. Consider the following HTML structure: <div id= "parent"> <div id="subparent"> <div i ...

htmlcss

Integrate database values into your CSS by dynamically changing styles using PHP

I'm attempting to dynamically change my CSS. The CSS value I need is stored in a database table called goals in the order database, which contains id and goal_1. Here's the code snippet I'm working with: <?php $conn = mysqli_connect ...

phphtmlcssmysqldatabase

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

htmlcss

CSS that creates a repeated background image sourced from an 'image map'

I have created an image map with coordinates and dimensions specified (apologies for the rough drawing...) https://i.sstatic.net/CxQAk.png The numbers represent x-coordinate, y-coordinate, width, and height. For instance, 5, 5, 25, 25 indicates that the ...

htmlcss

Animating the addition of the final child to the beginning

How can I animate the movement of a parent element's children arranged in a grid, going from the last item to the first item by using the .append() method or another technique? ...

javascriptjquerycssjquery-animate

Is it possible for CSS hover to have an impact on multiple divs that share the same class name

There are 5 divs on the page, all with the same class name as shown below: Here is the CSS: .test:hover{ color:red; } And here is the HTML: <div class="test"></div> <div class="test"></div> <div class="test"></div> ...

htmlcss

Tips on preventing the entire HTML structure from being displayed on my <div> element after an Ajax success(response) call

I have successfully implemented a user logon system on my website with flawless code execution. Check out the reset password Ajax request below. html <div id="forgotPass"></div> <script type="text/javascript"> ...

phphtmljquery

PrimeNG - Sticky header feature malfunctioning in the p-table

Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...

htmlcssangularprimeng

Can you provide instructions for generating a CSS background for my webpage?

I need some assistance with creating a shape similar to the one shown in the image. I want to use it as the background for a section on my webpage. Thank you. https://i.sstatic.net/7GpQI.png ...

htmlcss