How do I ensure that my absolutely positioned element is centered in this specific scenario?

I've been working on centering an element within its parent container, and I'm having trouble ensuring it remains centered responsively.

Here's what I have so far:

HTML

<div class="example">
    <span class="element1">Element 1</span>
    <span class="element2">Element 2</span>
</div>

CSS

.example {
    position: relative;
}

.element1 {
    width: 300px;
    height: 200px;
    background-color: #789845;
}

.element2 {
    position: absolute;
    top: 40%;
    left: (I'm unsure of what to use here); I want this element to always stay centered regardless of the browser window's width.
    width: 100px;
    background-color: #EEEE78;
}

I'm struggling with determining the appropriate left value, as setting a static value results in the element appearing slightly off-center on various browser widths. Can anyone offer guidance? Thank you in advance!

htmlcss

Answer №1

When working with an element that has an absolute position, remember the key rule: 

margin-left: auto; margin-right: auto; left: 0; right: 0;
.

Additionally, it's important to set a width on the parent element so that children elements can be positioned correctly. In this example, the .test class should have a width: 100%; (feel free to adjust as needed).

.test {
    position:relative;
    width: 100%;
}

.d1 {
    width:300px;
    height:200px;
    background-color: #789845;
}

.d2 {
    position: absolute;
    width: 100px;
    background-color:#EEEE78;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
<div class="test">
    <span class="d1">Test 1</span>
    <span class="d2">Test 2</span>
</div>

Answer №2

1- To achieve the desired effect, you can utilize left: 50% and transform for elements with unknown widths:

.test {
    position:relative;
}

.d1 {
    width:300px;
    height:200px;
    background-color: #789845;
}

.d2 {
    position: absolute;
    top:40%;
    width: 100px;
    background-color:#EEEE78;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
<div class="test">
    <span class="d1">Test 1</span>
    <span class="d2">Test 2</span>
</div>

2- Alternatively, if the width is known, you can use left: 50% and margin-left: -(half width):

.test {
    position:relative;
}

.d1 {
    width:300px;
    height:200px;
    background-color: #789845;
}

.d2 {
    position: absolute;
    top:40%;
    background-color:#EEEE78;  
    width: 100px;
    left: 50%;
    margin-left: -50px; /* - the half of width (100 / 2) */
}
<div class="test">
    <span class="d1">Test 1</span>
    <span class="d2">Test 2</span>
</div>

Answer №3

Experiment with left 0, right 0, as well as margin-left auto and margin-right auto. It's best to include a fiddle to avoid any guesswork.

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

Enhance your reality with Intel XDK's augmented reality feature

I am looking to develop an app using HTML and Intel XDK. It's a simple process - just place the final html pages in the www folder of the project and your app is good to go. Now, I want to integrate this: https://github.com/krisrak/html5-augmented-rea ...

htmlintel-xdk

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

javascripthtmljquerydrop-down-menudropdown

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Ensuring elements are correctly positioned

I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me. HTML: <div class=&apos ...

cssformattingalignmentvertical-alignment

What methods are recommended for expanding the size of a select/dropdown menu?

Managing a long list of values can be challenging, especially when it continues to grow. Consider the following example: <select> <option value="1">1, some test</option> <option value="2">2, some text</option> <optio ...

javascriptjqueryhtml

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

htmlcsscss-positionabsolute

The switch switches on yet another switch

Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...

javascriptjqueryhtmlcss

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

Having trouble getting this CSS code to work in Internet Explorer. Need a solution that is compatible with IE for setting the background. body { background: url("images/Login-BG.png") no-repeat center center fixed; -moz-background-size: cover; -webkit ...

htmlcssinternet-explorer

Tips for expanding an input field to span across two td elements

I am attempting to design a simple form. The issue I am encountering involves creating an input field that spans two td's in the second row of my table. Despite using the colspan="2" attribute within the td tag, the input field does not expand over tw ...

htmlcssinputhtml-table

The integration of Vue JS is not displaying properly in an Electron application

My electron app is loading Vue JS 2 from my local machine, but when I attach my el to an element, it completely empties the element and replaces its contents with a Vue JS comment. What could be causing this issue? index.html <!DOCTYPE html> <htm ...

javascripthtmlvue.jselectron

When the specified width is reached, jQuery will reveal hidden circular text upon page load instead of keeping it hidden

My current issue involves utilizing jQuery to hide circular text when the window width is below 760px. Although the functionality works as intended, there is a minor problem when the page loads under 760px width - the text briefly shows up before hiding ag ...

javascripthtmljquerycss

What is the process for integrating three.js code manually into an iframe?

I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...

javascripthtmliframethree.js

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...

htmlcss

Displaying MongoIds in HTML output for the user

Currently, I am in the process of developing a web application that utilizes MongoDB as its database management system. One challenge I am facing is finding a way to accurately identify which object the user has selected from a list on the screen, and the ...

htmlmongodbdatabase

Expand the div to fit one side of the browser

My bootstrap code looks like this: <div class="container"> <div class="row"> <div class="col-md-8">content</div> <div class="col-md-4"> <div class="map">map goes here</div> </div> </div& ...

htmlcsstwitter-bootstrap

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...

htmlangulartypescriptformsangular-reactive-forms

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

javascriptjqueryhtmlcssyoutube

Troubleshooting the integration of CSS modules with my Express application

After working with CSS in a single file for quite some time on my current project, I've realized it has become too lengthy and difficult to manage. To make editing easier, I am now looking to modularize my CSS code. While I have experience doing this ...

cssexpressejs

Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hi ...

csstwitter-bootstraptext-align