Vertical centering issue with div specifically in Safari

I am facing an issue with centering a nested div containing a UL within another div. Despite trying various methods to achieve vertical alignment, I am unable to get it to work properly. PARENT

.splash {
    background: url(../img/splash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
    min-width: 30%;
    min-height: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

CHILD

.media {
    display: block;
    position: absolute;
    padding-left: 3px;
    left: 0;
}
htmlcss

Answer №1

Centering vertically can be achieved easily. My preferred method is using the translateY technique, demonstrated below in the context of .media:

html, body {
  margin: 0;
}

.splash {
    background-image: url(https://images.unsplash.com/reserve/Hxev8VTsTuOJ27thHQdK_DSC_0068.JPG?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
    min-width: 30%;
    min-height: 50%;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media {
    display: block;
    position: absolute;
    padding-left: 3px;
    left: 0;
    font-size: 150%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .5);
    padding: .75em 1em;
}
<div class="splash">
  <div class="media">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>  
</div>

I included a background color behind .media to enhance text visibility. Additionally, I adjusted the dimensions of the parent to 100vw and 100vh for the demonstration's sake, ensuring it covers the entire viewport. Using top: 50% along with transform: translateY(-50%) effectively centers the content.

https://jsfiddle.net/0o2kwv2w/

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

Loading content dynamically with AJAX and enabling smooth page scrolling

Looking for a solution to this issue. I have a button on my webpage that, when clicked, uses AJAX to load content into a "div" element below the button. Everything functions properly except for one problem - every time the button is pressed, the page scrol ...

javascriptjqueryhtmlajax

Achieve full width with flexbox column wrap while minimizing the height

How can I arrange elements in columns within a container with a fixed width and variable height, when the number of elements is unknown? My challenge is that I do not know the maximum width of the child elements, preventing me from setting specific column ...

cssflexbox

A step-by-step guide to successfully integrate vantajs wave in your React application

My problem involves using the vantajs wave library. I want to figure out how to make the waves continue rendering on a specific CSS selector even after clicking through the tablinks of my react app. However, I encounter an error when using Brave browser th ...

htmlreactjsthree.js

Conceal an element along with its space, then signal the application to show alternative content using React

Greetings everyone! I seek assistance with a React Application that I am currently developing. As a newcomer to the Javascript world, I apologize if my inquiry seems trivial. The application comprises of two main elements: a loader, implemented as a React ...

javascripthtmlcssnode.jsreactjs

How to ensure an image or ad stays in a fixed position on the screen

Is there a way to keep a part of the screen fixed, regardless of what other elements are in that space? Do I need to merge code with the HTML code of the ad or image to achieve this? ...

htmlcss

Using an HTML5 image icon as an input placeholder

Is there a way to incorporate an image icon into an input placeholder and have it disappear when the user starts typing, across all browsers? In trying to achieve this, I successfully implemented a solution for webkit (Safari+Chrome) using ::-webkit-input ...

csshtmlcross-browserplaceholder

My objective is to show the div element just once using AngularJS

Here's the scenario I want to show this div just once, not multiple times: //angular js code $scope.arr=["sunday","mpnday","tuesday"]; //html view <ul> <li ng-repeat="x in arr"> <div><p>{{ x }}</p> </div> & ...

javascripthtmlangularjs

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

htmlcssvertical-alignment

What steps should I take to create a collapsible Bootstrap navbar?

I'm attempting to recreate the scrolling functionality seen here: It seems like they might be using a customized Bootstrap Navbar, so I've taken one from here: and tailored it to my needs. How can I achieve the effect where the navigation bar ...

javascriptcsstwitter-bootstrapnavbar

What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence: <ol> <li>Products</li> <li class="active">Customer</li> <li>Payment</li> </ol> On desktop view, it appears a ...

htmlcss

Enhance Your Website with HTML5 Video Transition Effects

Is it possible to recreate video transition effects using HTML5 similar to the ones shown in this example: Can this be achieved across all major browsers, including Safari, Firefox, Chrome, and IE9? ...

jquerycsshtmleffectstransition

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

Updating the logo image on mobile devices using responsive CSS styling

My goal is to show a different image to users on mobile devices using only CSS, as I am unable to access the HTML code. On mobile, I used display:none for the header-logo-image img { and then added a background-url to the div to successfully display my alt ...

css

The Bootstrap modal causes the scrollbar to vanish upon closure

Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me. Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful ...

javascriptcsstwitter-bootstrapmeteortwitter-bootstrap-3

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

javascriptcssreactjs

Swap out the variables in your function with the values selected from the dropdown menu

I've recently started delving into writing JS functions and I'm facing a challenge with the following scenario: On an HTML page, I want to change a variable within a lodash function based on the value of a dropdown and display the result in a HT ...

javascripthtmlarraysjsonlodash

Apply a patterned background with CSS styling

I have tried to implement a custom CSS design using the background image bg.jpg with a pattern of dots.png that repeats both horizontally and vertically. *{ margin: 0; padding: 0; } body { margin: 0px; padding: 0px; color: #666; fo ...

htmlcss

Creating an interactive table with the power of FPDF and PHP

I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...

javascriptphphtmlfpdf