CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child div also has an absolute position along with a margin: 0 auto style.

.slide-block {
  position: relative;
}

.slide-block .slide-block-center-wrapper {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-block .slide-block-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  left: 0;
  right: 0;
}
<div class="slide-block">
  <div class="slide-block-center-wrapper">
    <div class="slide-block-content">
      ...some slide caption content
    </div>
  </div>
</div>

The issue I am facing is that the .slide-block-content is not appearing in the center in the IE browser. It displays correctly in chrome and mozilla.

htmlcssinternet-explorer

Answer №1

If you're looking to center an element vertically, here's a solution that may work for you. To achieve vertical alignment, it's important to have the height of the element specified. Additionally, by changing the display property of the 3rd child to inline block and using the transform property, you can horizontally align the element. If vertical alignment is all you need, simply remove the left: 50% and switch from translate to translateY.

.slide-block {
  position: relative;
  width: 100%;
  height: 200px;
  background: deepskyblue;
}

.slide-block .slide-block-center-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-block .slide-block-content {
  display: inline-block;
  max-width: 1180px;
  padding: 0 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  -moz-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
<div class="slide-block">
  <div class="slide-block-center-wrapper">
    <div class="slide-block-content">
      ...some slide caption content
    </div>
  </div>
</div>

Answer №2

*{
 margin: 0px;      /* Added */
 padding: 0px;     /* Added */

}

.slide-block {
  align-items: center;  /* Added */
  }

.slide-block .slide-block-center-wrapper {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-block .slide-block-content {
  max-width: 1180px;
  margin: 0px;
  padding:0px;
  position: absolute;
  top: 50%;
  left:50%;  
  transform: translate(0,-50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
<div class="slide-block">
  <div class="slide-block-center-wrapper">
    <div class="slide-block-content">
      ...some slide caption content
    </div>
  </div>
</div>

Answer №3

To center your content, you can add the property justify-content: center to the class 

.slide-block .slide-block-content
. Give it a try and hopefully it will solve your issue.

.slide-block .slide-block-content {
    justify-content: center;
}

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

Manipulate the text() function within jQuery as the div is being created

The code $('#box').text("hello") will display "hello" as text. But how can I use it when creating a div in a loop? for(i=0; i<3; i++) { description += "<div id='box'>" + text[i] + "</div>"; } Is there a way to s ...

jqueryhtmltextxss

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

The required widths of table columns are not being adhered to

I'm struggling to create an HTML email that will display correctly in Outlook. I initially used list items and the list-style-image Property, but that doesn't work in Outlook. Essentially, I have a table with 2 rows. The left row has an 11 pixel ...

htmlcssoutlook

Transforming the color of a globe from black to white with gio js

After searching for a solution to change the color of a Three.js globe, I came across a link that didn't work as expected: Change the color of a Three.js globe. My goal is to change the globe color from black to white using . I attempted to use the f ...

javascriptjqueryhtmlcssthree.js

Alter the button ID based on the currently displayed div

My mind is being driven crazy by a particular issue I am experiencing. Let me explain... I have a lengthy scrolling page with approximately 10 divs stacked one after the other without any spacing in between. Positioned at the bottom of the viewport is a bu ...

javascriptjqueryhtml

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting. If you'd like to take a look at the example, ...

jqueryhtmlcssanimation

Steps for accessing specific menu div on a new tab

I'm facing an issue with my one page website. Whenever I click on a menu item, it directs me to a specific div tag on the page. However, if I right-click on a menu item and select 'open in new tab', it opens the URL "www.mysite.com/#" instea ...

javascriptjqueryhtml

The radio button allows for the selection of multiple items, rather than just one at a time

https://i.sstatic.net/9MEzS.png I have implemented a radio input as shown below <input type="radio" id={el.name} className="form-check-input" name={el.name} data-count={el.name} value={el.id} onChange={this.select_role.bind(this)} style={{margin: "4px ...

javascripthtmlreactjsradio-button

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Updating the titles of Bootstrap 4 Switches on the fly

Currently utilizing Bootstrap 4 Toggle on my website, I'm struggling to figure out how to dynamically modify the labels on the toggles at runtime. My objective is to implement a toggle-switch that, once activated, displays a countdown indicating the ...

javascripthtmljquerybootstrap-4

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

What is the process of extracting a URL and inputting it into a form to enhance

Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...

javascripthtml

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

"Quotes are essential in Javastript syntax for specifying string values

I need to implement a JavaScript syntax to generate unique URLs for each image. The Robohash website provides random robot images based on different URL endings. I tried the code below, but it seems like ${props.id} is being interpreted as part of the UR ...

javascripthtmlreactjs

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

javascripthtmlcssangulartypescript

Issue with Img Srcset Attribute Ignoring Smaller Images

The <img> element's srcset attribute seems to always select the larger <img> source, even when the size media query is false. I found success in using a <picture> element to ensure image selection based on browser width. Based on th ...

htmlsrcset

What would cause this to result in a blank array?

I have a main component that contains multiple sub-components, which I navigate between by clicking on different elements. These sub-components are all Vue files. What I am trying to achieve is to dynamically highlight the active component when it is bein ...

javascripthtmlcssvue.js

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

I am in the process of creating a user-friendly "My Account" page using react, where users can easily update their account information. I have divided my components into two sections: the navbar and the form itself. However, I am facing an issue with the s ...

javascriptcssreactjsformsvalidation

What is the Best Way to Implement a Three-Column Layout on a Website with Bootstrap?

https://i.sstatic.net/raF0B.jpg ...

cssbootstrap-4frontend