What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #123456;
}

#object {
  background-color: cornsilk;
  border: #333 3px solid;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  width: 750px
}

#spoiler {
  background-color: blue;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.3s opacity linear;
  z-index: 5;
}

#spoiler:hover {
  opacity: 0;
}

#big {
  background-color: green;
  color: black;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
/*   top: 0; */
  z-index: 20;
}
<div id="object">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae aperiam praesentium commodi optio ab saepe deserunt ullam et sequi doloremque consectetur hic laudantium inventore dignissimos, placeat modi nobis est nostrum.</p>
  <div id="spoiler"></div>
  <p id="big">Hover to show</p>
</div>

I'm trying to figure out how to vertically center the text "hover to show", any solutions?

htmlcss

Answer №1

For vertically centering an absolute element within a relative positioned parent, you can utilize the top:50% (where 50% represents half of the parent's height) in combination with transform: translateY(-50%) (where 50% signifies half of the element's height).

This method ensures vertical center alignment regardless of any changes in the parent or element height.

To enhance the user experience, I included a CSS line to hide the 'green' div when hovering over the 'spoiler'.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #123456;
}

#object {
  background-color: cornsilk;
  border: #333 3px solid;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  width: 750px
}

#spoiler {
  background-color: blue;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.3s opacity linear;
  z-index: 5;
}

#spoiler:hover {
  opacity: 0;
}

  

#big {
  background-color: green;
  color: black;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

#spoiler:hover + #big {
  opacity:0;
}
<div id="object">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae aperiam praesentium commodi optio ab saepe deserunt ullam et sequi doloremque consectetur hic laudantium inventore dignissimos, placeat modi nobis est nostrum.</p>
  <div id="spoiler"></div>
  <p id="big">Hover to show</p>
</div>

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

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

htmlcss

Tips for resolving a post 405 error on a Windows 2012 R2 server

My test application is designed to record camera footage and send the file to a directory on my server. The main code for this application is shown below: <!DOCTYPE html> <html> <head> <script src="https://cdn.WebRTC-E ...

javascriptphphtmlposthttp-status-code-405

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

javascriptjqueryhtmlformsbutton

JQuery will only run after the Alert has been triggered in Firefox

I am currently facing an issue with updating the 'like' count in my database using the 'changeRating()' method when a user interacts with local like, Facebook like, or Twitter buttons. Oddly enough, the 'likes' are not being ...

javascriptjqueryhtmlajaxfirefox

Uninstall webpack-dev-server version 1.14.1 and replace it with version 1.14.0

Can someone help me with the process of uninstalling webpack-dev-server 1.14.1 and installing version 1.14.0 on Ubuntu using just commands? Error message: Uncaught TypeError: Cannot read property 'replace' of null at eval (eval at globalEval (jq ...

javascripthtmlubuntu

Personalizing the Navigation Bar

I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices. To view my progress so far, check out this JS Fiddle link Here is the HTML code I have created: <div class="container-flu ...

htmlcssbootstrap-4

Searching for specific text within HTML href tags involves parsing the HTML document and

[I'm having trouble isolating links that contain the specific text '/Archive.aspx?ADID='. Even though I have tried to filter for these specific links, I end up retrieving all of the links from the webpage. Once I am able to extract the desir ...

pythonhtmlparsingweb-scrapingbeautifulsoup

Width of the `div` element is expanding

I'm encountering an issue where a div container is automatically stretching to the full width of the page, instead of adjusting to fit the content within it. Below is the HTML code snippet: <!doctype html> <html> <!-- Head --> <h ...

htmlcss

Having issues with Django not recognizing multiple identical GET parameter names

A Django form is being used for filtering data via a GET form: from reservations.models import Reservation, ServiceType from django import forms PAYMENT_OPTIONS = ( ('CASH', 'Cash'), ('ROOM', 'Charge to room&apo ...

pythonhtmldjango

Separate sentence to one word per line

Can CSS be used to display each word of a sentence on a separate line? Input: <div>Hello world foo bar</div> Rendered output: Hello world foo bar It is not ideal to set the width to 1px, as specified. ...

css

What is the best way to link to a CSS file located in a different directory while being in a subdirectory?

For a project I am working on, I am developing a simple streaming site and have organized my files into different folders. These folders include: HTML CSS Shows Within the "Shows" folder, there is a subfolder named "Testshow". I am facing an issue with ...

htmlcssdirectory

Tips for creating a zoomable drawing

I have been working on this javascript and html code but need some assistance in making the rectangle zoomable using mousewheel. Could someone provide guidance? var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width ...

javascripthtmlcanvas

placing a div inside another div

As I work on my website, I have created several panels with a repeating texture. To enhance the visual appeal of the site, I decided to add colored divs and adjust opacity for a tint effect instead of using separate images. The issue I'm facing is th ...

csshtml

Creating artwork: How to resize images without losing clarity

Struggling to display an image in a canvas element that needs to be a certain percentage of its parent container's width. Despite my efforts, the image seems to blur once added to the canvas, which is not the desired effect. I attempted to disable th ...

javascripthtmlcsscanvas

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

javascriptcssvue.js

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

I'm currently working on a simple functionality where I have 5 rows, each with its own number. So initially, the rows are numbered from 5 to 1. If I remove a value like 3, the sequence should adjust to 4, 2, 1, indicating that I now have only 4 rows ...

javascriptjqueryhtmlcss

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...

htmlcssgoogle-chrome

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Resetting a component's color to its default state after being styled by a parent selector

The Bootstrap stylesheet contains the following code: pre code { color: inherit; } Even if I include an explicit pre code { color: red; }, the style from Bootstrap's stylesheet still takes priority. Why does this happen? [Edit: can ignore this ...

csstwitter-bootstrapbootstrap-4