How to perfectly center an absolute positioned element vertically

I have recently started using the Bootstrap 3 framework, and I noticed that the columns they offer handle a lot of content centering automatically.

Here is the CSS code I am currently using:

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  transform: translateX(-50%);
  opacity:0;
  transition: opacity 0.5s ease;
}

This CSS styling is contained within a div with a relative position.

While this setup works perfectly in Firefox, I am encountering issues in Safari. I understand the need for adding browser-specific CSS to ensure cross-browser compatibility, so what adjustments should be made to make it work seamlessly in Safari as well?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

I encountered a similar issue and managed to resolve it by utilizing the webkit prefix:

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  opacity:0;
  transition: opacity 0.5s ease;
}

Answer №2

If you're looking to solve these issues, my recommendation would be to utilize a JavaScript library similar to the one mentioned here:

With this tool, you can simplify your CSS coding process by eliminating the need to manually add browser prefixes - prefixfree will take care of that for you!

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

WP AJAX: nonce functions properly for guests, but not for registered users

I am currently setting up a WordPress website to utilize jQuery/AJAX for querying and loading posts within a div container. Below is an excerpt from my functions.php file (simplified for clarity): function mysite_enqueue_scripts() { wp_register_script( ...

phpjqueryajaxwordpress

The bottom section of the webpage fails to follow the CSS height or min-height properties

Taking into account the question I raised earlier: How can a div be made to occupy the remaining vertical space using CSS? I received an answer which I have been experimenting with lately: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt ...

csshtml

The continuous firing of the postback event of the Asp.Net Button is

Why does the postback event keep firing for my button? Strangely, when I try to debug with Firebug and set a break point on the function(e) part, the code seems to skip right over it. Even using return false doesn't seem to resolve the issue. <sc ...

javascriptjqueryasp.net

Customizing Semantic UI Navigation Menu Styles

For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here: To display my header, I am using the following code: <Menu className='header' > <Containe ...

cssreactjssemantic-uisemantic-ui-react

Showing a nested dataset with a condition: Is there a way to hide the information for products that do not meet the color condition?

I need help refining my code to only display the quantity of colors that are more than 10. Right now, it shows all colors, including those with less than 10. How can I adjust this? Thank you. Find my codesandbox here: https://codesandbox.io/s/products-0cc ...

javascriptreactjs

Styling text over an image when hovering with CSS and HTML

I have successfully implemented a functionality, but I am looking to enhance the appearance of the text displayed when an image is hovered over. Below is the current code snippet: .ecommerce-categories [class^=col-] > a:before { content: attr(data- ...

htmlcss

Steps for removing the console warning message: "The use of enableRowSelect has been deprecated. Instead, please utilize rowSelection."

) I have integrated React Data Grid from https://adazzle.github.io/react-data-grid/ multiple times in my application. One thing I noticed is that there is a console warning related to a prop called "enableRowSelect" which indicates whether the prop is bein ...

javascriptreactjstypescriptreact-data-grid

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

I am currently experimenting with MUI table components and have created an example below with pagination. const MuiTable = () => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); const [data, setData] ...

javascriptreactjsmaterial-uipagination

Can you provide a way to directly calculate the total length of all arrays within an array of objects?

How can I find the total length of arrays in an array of objects based on a specific property? var myArray = [{ "a" : 1, "b" : another Array }, { "c" : 2, "b" : another Array } ..... ] Is there a more efficient way to achieve this instea ...

javascriptlodash

How to automatically update a hidden input field using Typeahead.js and key values from a JSON data source

On one of my pages, I have successfully implemented a typeahead feature that retrieves data from a remote URL in the form of a JSON string like this: [{"id":"1","name":"Ben"},{"id":"2","name":"Josh"}]. My goal is to update a hidden field with the correspo ...

javascriptjqueryjsontypeahead.js

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

javascripthtml

Issues with Angular service functionality

I've been working on an application using Angular for the client side and Node for the server side. I've incorporated some API's into my Angular code, but I'm encountering difficulties with retrieving data from a specific API. Can someo ...

javascriptangularjsnode.js

Unable to display <iframe> containing a YouTube video on Mozilla Firefox page

I have included an <iframe> in my webpage to display videos from YouTube, but I am facing an issue with Mozilla Firefox. In Chrome, IE, and Edge, the videos display correctly using the following code: <iframe src="http://www.youtube.com/v/DNLh8p ...

htmlfirefoxiframeembed

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Exploring different approaches to recreate the functionality of promise.allsettled by utilizing async.each

I previously had a code snippet containing Promise.allSettled(payoutPromises); Unfortunately, it did not function properly on our server due to its nodejs version being 10. After consulting some blogs for guidance, I came up with the following alternativ ...

javascriptnode.js

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

javascripthtmlangulartypescript

Refresh the added div on jQTouch using ajax

When using the jQT AJAX demo (main/index.html), the link does not have a # sign before it is loaded. <a href="ajax.html">GET Example</a> Once loaded, it changes to the following, replaced by the div id in ajax.html. The loaded div with the ID ...

jqueryajaxreplacereloadjqtouch

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

JavaScript Selenium code encountering an "Element not interactable" error with input textbox element

Currently, I am attempting to utilize Selenium in order to automate inputting a location into the search bar on weather.com. Initially, I wrote the code in Python and it seems to be functioning properly: // this works driver = webdriver.Chrome(ChromeDriver ...

javascriptpythonseleniumgetelementbyid