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

Best practices for organizing your Obelisk project include creating a specific folder for CSS files within

Trying to align two divs side by side using Obelisk, I referred to this post for guidance on how to do it: How to place div side by side. The solution required declaring classes in CSS. Utilizing the instructions from a tutorial (https://github.com/hansrol ...

csshaskellreflexreflex-domobelisk

How can I align an input to the right using Bootstrap?

I found an example of a navbar that I liked and decided to copy it. Here is the code snippet: <div class="container"> <h3>Nawigacja zamknieta w kontenerze</h3> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> < ...

csstwitter-bootstrap

css: positioning images with overlap in a responsive layout

Two divs have been created with background images, both displaying the same image but in different colors - one grey and the other green. These images are waveforms. Initially, only the grey image (div1) is visible while the green image (div2) remains hid ...

javascripthtmlcss

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

htmlcssnavigationcenter

Ways to insert a div element into the HTML display utilizing JavaScript

There's a method I'd like to use to dynamically add a div to the view using JavaScript. I attempted hiding the div on page load and then showing it through JavaScript. However, what ends up happening is that the div content appears briefly on l ...

javascripthtmljquerycss

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

javascripthtmlweb-audio-api

Utilizing CSS to transform text with a sleek, animated writing effect

I have utilized CSS to create a captivating animation effect where text is written out in a smooth style. I am seeking assistance in replacing the current text with a different one while maintaining the same effect. HTML & CSS .typed-out{ overflow: ...

htmlcssanimationtext

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

cssreactjsredux-formreact-bootstrap

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

Changing Images with Button Click in Javascript

I am facing an issue with my buttons that should swap images once clicked. The first two buttons work perfectly, but for the third and fourth buttons, the images do not disappear when clicking another button. Below is the current code in the document head ...

javascripthtmlimagebutton

Tips for parsing information contained in a cdata tag using python

I have successfully used Beautiful Soup to extract CDATA from an HTML page, but now I need to parse the contents and save them in a CSV file. Here is the code I am using: from bs4 import BeautifulSoup from urllib.request import urlopen import re import c ...

pythonhtmlxmlbeautifulsoupcdata

How to Transform a Navigation Bar into a Carousel

I am creating a website that is designed to be responsive. Currently, I have a horizontal navigation bar which collapses into a drop-down menu when the screen size decreases. When each tag in the menu is clicked, a different image loads into a designated ...

jqueryhtmlcss

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

I am attempting to rearrange the order of a specific div using the nth-child() selector in CSS within a media

I am struggling to rearrange the div elements and the nav class is not appearing in the media query when inspected. Seeking assistance from an expert. Here is the CSS code: @media screen and (max-width:810px) and (min-width:413px) { .nav:nth-child(2) ...

htmlcss

How can I show tab objects in a Chrome extension?

I'm currently working on developing a new Google Chrome extension that focuses on tab organization. Despite the abundance of similar extensions already available, I am determined to create my own unique solution. One idea I have is to create a popup w ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

Clip the text with ellipsis if it exceeds the limit and show the file

Currently working on an upload feature where I need to show the name of the uploaded file. File Name.txt The problem arises when the name is too lengthy, resulting in a display like this: File Name Is Too Long...txt I attempted to solve this by implement ...

htmlcss

Transform the scrollbar appearance on hover. Implement this feature using React and CSS with Material-UI

Within my React app, I am facing an issue with a scrollbar appearing in multiple lists. The global CSS being used within Material-UI is as follows: MuiCssBaseline: { ...theme.overrides?.MuiCssBaseline, '@global': { '@font-fa ...

cssreactjsmaterial-ui

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs