The div inside another div does not appear centered on Safari

Even though I've managed to center a div within another div, it seems to not be functioning properly in the Safari browser.

#box{
            width: 100%;
            height: 100%;
            position: relative;
        }
            
        #inner_box {
            margin: 0;    
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
<div id="box">
            <div id="inner_box"></div>
        </div>
htmlcss

Answer №1

When using Safari, it is important to remember the necessity of including the -webkit- prefix for the transform property:

#inner_box {
    /* … */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Answer №2

If you want to experiment without using positioning, give this a shot:

#container{
  width: 100%;    
  height: 100%;
  position: relative;
  text-align:center;
}

#content {
  display:inline-block;
}

Answer №3

It appears that the <code>margin-right: -50%;
is unnecessary in this case. Additionally, the #box div already occupies 100% height and width of itself.

The alignment of #inner-box with top and left positioning is already in place. Furthermore, the transform style centers it within the #box.

#box{
    position: relative;
    }

    #inner_box {
        margin: 0;    
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }

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

Attributes in HTML for EditorFor() within ASP.NET MVC

Is there a way to include HTML attributes in EditorFor()? For example: <%= Html.EditorFor(model => model.Control.PeriodType, new { disabled = "disabled", readonly = "readonly" }) %> I prefer not to rely on metadata for this. Update: I fou ...

htmlasp.net-mvceditorfor

Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

I am currently working on a website using bootstrap 4, and I'm facing an issue with the image I selected. It seems to rotate to the right and is not displaying correctly. click here for image preview The main problem lies in rotating the image witho ...

htmlcssbootstrap-4rotationtransform

Craft a backdrop with subtle hints of italics

I am looking to create a unique background for my webpage using HTML and CSS. I want to have repeated italic shades in various shades of blue, red, and white, similar to rectangular shapes. For inspiration, take a look at the design on this website: If n ...

htmlcssphotoshoprectangles

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

javascripthtmlangulartypescriptcheckbox

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Implement Spacing Between Components in React Native

Seeking assistance in resolving the issue of overlapping views within my react native app, specifically requiring spacing between them. Upon clicking the plus sign twice in the top right corner, the two Views overlap without any space between them (referr ...

javascriptcssreactjsreact-nativestyling

Issues with `Float:left` not functioning as expected on a div with dynamically changing

I'm currently working on setting up a base div that I can easily duplicate whenever I need to add new content to my website. Here's how the initial HTML structure looks: <div class="post"> <p class="date">17/03/1014</p> <h1& ...

htmlcss

Centering two images by stacking them with Bootstrap 5

I'm working on a bootstrap layout with two columns, and I need to achieve a semi-opaque background image that covers the entire column with a dark overlay. This is to create contrast for a logo that will be centered within the column. I've tried ...

htmlcssbootstrap-5

JavaScript JQuery alert popup fails to display

I have been attempting to create an alert pop-up using JQuery that will display when a user clicks on submit without filling out the form. However, when I test my code by leaving the form empty and clicking 'submit', the page just refreshes with ...

javascriptjqueryhtmlformsalert

The primary division containing two inner divisions, one centered and the other positioned to the right

I would like the layout to resemble the image provided. The div header contains two nested divs - the logo div should be centered, and the info div should be positioned to the right with some margin. ...

htmlcss

Issues with Animations in Animate.css

Seeking to achieve fluid transitions using Vue.js and Animate.css, encountering issues with certain animations not functioning as expected! Successfully implementing animations such as: bounceIn, bounceOut, and hinge. Experimenting with this on codepen.i ...

javascriptcssvue.jsanimate.css

Can you provide the distribution of percentages for each heading tag in HTML?

I recently adjusted the font sizes to be more consistent across various elements: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, ...

htmlcssfont-size

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

I am looking for a way to showcase a list of Accordions in a two-column layout. Each Accordion consists of both a Summary and Details section, with the Details being visible only when the Summary is clicked. Unfortunately, I won't delve into the imple ...

htmlcssreactjscss-grid

Exploring the functionality of multiple index pages in angularjs

I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...

javascripthtmlangularjsangular-routing

Using .float-right and .float-left within a .row in bootstrap 4 does not achieve the desired result

When using Bootstrap 4, the float property may not work as expected inside a row. I am trying to have the right div appear on the left and the left div appear on the right, but in responsive view I want the right div to be displayed before the left div. ...

htmlbootstrap-4css-float

Creating a button inside an input field using HTML and CSS

Is there a way to place a button inside a text input field? I want to achieve this design: https://i.sstatic.net/q2M9v.png This is my current code: input { background: #8196aa; border: 0; border-radius: 10px; color: whi ...

htmlcss

HTML Form with Contact Number Listed

When using the "tel" attribute in an input, we can set a maximum or minimum length for the input. However, the drawback is that it allows for all types of inputs, whether numeric or alphabetic. On the other hand, if we use the "number" attribute for the i ...

htmlcssbootstrap-5contact-form

Can someone please show me how to position this H1 in the center at the bottom of the div?

Looking for a simple solution to place text at the bottom of a div without turning the entire div into a grid. New to HTML/CSS and struggling with vertical alignment issues... <!DOCTYPE html> <html> <head> <title>Creating an O ...

htmlcsstextpositioning

Update search results when performing a new search on a web application (without using jQuery)

My simple web app interacts with an API to retrieve search results from a database and utilizes ajax to insert them into an empty ul element on the page (employing JSONP for cross-domain requests). I am struggling to achieve this functionality using plain ...

javascripthtmlajaxapi

Conceal the Ipad keyboard while still retaining the ability to input text using a customized keyboard

I need to create an input field where users can enter numbers using a custom "keyboard" created with CSS/HTML on the page. This means I don't want the iPad's keyboard to pop up. Most of the solutions I've come across involve removing focus f ...

javascriptjqueryhtmlioscss