The alignment of a table can appear centered in Chrome, although in Firefox it may not display in the center

I am trying to create a div that is centered both vertically and horizontally using display:table. It works perfectly in Chrome but not displaying correctly in Firefox.

The id of the div is #content:

#content {
    background: red;
    width: 367px;
    height: 441px;
    display: table;
}

.centered {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
<div id="content" class="centered">
  <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
</div>

View the example on jsfiddle

htmlcssgoogle-chromefirefox

Answer №1

For those comfortable with CSS3, consider utilizing the transform:translate property.

Check out this code snippet on JSFiddle

Answer №2

It should function correctly

#main-content {
  margin-right: auto;
  margin-left: auto;
  position: relative;
  top: 50%;
  transform: translateY(+50%);
}

Answer №3

To center contents using css2, you can utilize the table-cell method:

    #content {
        background: red;
        width: 640px;
        height: 441px;
        display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
    <div id="content" class="centered">
      <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
      <div>test</div>
    </div>

To center the #content on the page, simply add this line of css: margin: 0 auto;

For more information, visit http://www.w3.org/Style/Examples/007/center.en.html

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

The CSS class fails to run when added in a JS file

I have just started learning CSS and JS, and despite reviewing my code multiple times, consulting w3schools, and searching for similar issues, I am still unable to pinpoint where the error lies. <! DOC TYPE HTML> <html> <head> <h1 ...

javascripthtmlcss

Automatically activate click events based on modifications in certain div classes - must be repeated in a loop

When a user makes changes within the .ap-create-story-panel-wrap div and then clicks outside of that specific div, I want to trigger a button click in my function. I am currently using the data-panel attribute as the selector for the container variable. I ...

jqueryhtmlcss

Concern regarding the appearance of tooltip positions

Incorporated Bootstrap to enhance the design....The popover tooltip positioning is not behaving as expected. I want it to display in the far right corner with the Glyphicon, but it keeps appearing on the left. What I attempted previously: 1) I modified t ...

javascriptjqueryhtmlcss

What could be causing the inner container to not fit within the outer container?

.main { background-color:#669; width:1200px; margin-left:auto; margin-right:auto; height:1000px; } .content { background-color: #CCF; width:100%; height:1000px; margin-top:5%; position: absolute; } Despite setting ...

htmlcss

Best practices for securely transferring tokens from an HTTP GET request to an HTML page in Node.js

I have been working on developing my own unique password reset system that sends an email to the user with a link to reset their password. Initially, I created a one-of-a-kind token that is included in an http get request link and then emailed to the user ...

javascripthtmlnode.jssecuritypasswords

Manage the sequence in which the various paths of an SVG element are displayed

Searching for a way to display an image in HTML with a rounded dashed border? Take a look at the example below: https://i.sstatic.net/YrCZS.png The number of dashes and their colors can be controlled, similar to what you see in WhatsApp's status tab ...

javascripthtmlcsssvg

Guiding motion of a parental container using a button

This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...

javascripthtmlmouse

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Place the span in the upper right-hand corner within the MaterializeCSS Collection

I am facing an issue with positioning a span in a CollectionItem. I need it to be in the top right corner or aligned in the middle, but currently, it is staying in the bottom corner, and the problem seems to be with the first Item. Below is the code snipp ...

htmlcssmaterialize

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Transferring information between HTML pages using JSON and jQuery

After reviewing the topics, I was unable to find a complete answer. My objective is to populate a drop-down menu with text from another HTML file. Both HTML files are located on localhost. It is mandatory for the data to be in JSON format. Initially, I a ...

javascriptjqueryhtmljson

Executing the main process function

One of the challenges I'm facing is calling a function from the main process in Javascript while a button is clicked in another file. Here is the code snippet: Main.js const electron = require( 'electron') const {app, BrowserWindow} = elec ...

javascripthtmlelectron

JavaScript function failing to utilize innerHTML output

Having trouble with my BMI calculator code. Even after adding sample text for testing in JavaScript, the function still isn't working. Can someone help me figure out what's wrong? <h2>Welcome to BMI calculator</h2> <h4>Please ...

javascripthtmlfunction

Limit jQuery script to operate exclusively on a single page

Despite the abundance of answers to similar questions, my lack of JS skills hinders me from implementing them in my specific case. On my WordPress site, I have a script that changes the navigation bar's color when scrolling down to the #startchange CS ...

jquerycsswordpress

Diving into Angular Typescript: Understanding the [object Object] in HTML

One of my todos requires the following input: todo.ts: import { TodoTag } from "./todo-tag-custom"; export class Todo { ... tags: TodoTag[]; } todo.html <tr *ngFor="let todo of todosFiltered()"> <td>{{todo.tags | json ...

htmlangulartypescriptpipe

Tips for positioning and resizing objects in Three.js

I've been experiencing issues with scaling and centering a msgpack compressed object that I loaded using the ObjectLoader. It seems like there may be rotations causing unexpected behaviors. Sometimes the object centers perfectly, but other times it&ap ...

javascripthtml3dthree.js

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

Nested flexbox causing Firefox to malfunction in handling overflow-y

I successfully created a layout using CSS3 flexbox that spans 100% width and height. This layout functions properly on IE11, and possibly on IE10 when emulating IE11. Unfortunately, I encountered an issue with Firefox (35.0.1) where the overflow-y propert ...

cssfirefoxoverflowflexbox

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay