Center alignment function is not functioning correctly

I'm struggling to center the text both vertically and horizontally inside my div. No matter what I try, I can only get it to align horizontally. Here is the CSS code I have been using:

#loading > h1 {
  text-align: center;
  font-size: 21px;
  animation: fadeUpIn 3s;
  -webkit-animation: fadeUpIn 3s; /* Safari and Chrome */
}

@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
  from { opacity:0; top:150px; }
  to { opacity:1; top: 70px; }
}
#loading{
  position: absolute; top: 0; left: 0;
  width:100%;
  height: 100%;
  background-color: gray;
  color: white;
  opacity: 1;
  transition: 1s;
  visibility: visible;
}
#loading.hidden{
  opacity: 0;
  visibility: hidden;
}

This is a snippet of my HTML code:

<div id="loading">
<h1>Creative. Simple.</h1>
</div>

For a full view of my website, you can visit this JS Fiddle link: https://jsfiddle.net/sjyoqdqy/

htmlcsstext-alignment

Answer №1

My recommendation would be to include the following CSS code within #loading > h1:

#loading > h1 {
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  margin: 0;
}

Afterwards, make sure to adjust the animation position for consistency:

@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
  from { opacity:0; top:58%; }
  to { opacity:1; top: 48%; }
}

Feel free to check out this example in action on a Fiddle: https://jsfiddle.net/sjyoqdqy/6/

Answer №2

#loading {
   ...
   display: flex;
 }
#loading h1 {
   ...
   display: flex;
   align-items: 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

Adding Php code to a Wordpress form can be done by creating a custom

I'm struggling to incorporate a PHP code into a WordPress form that I created. Despite trying three different PHP plugins, I haven't been successful. Can anyone advise on where and how to properly integrate the PHP code in WordPress and call it t ...

phphtmlcsswordpressforms

Django redirects to an alternative template instead of the default one

After renaming my login.html file to login1.html instead of deleting it, I have been using Django-registration and Django-registration-views from Github. However, despite this change, Django continues to call registration/login1.html. Is there a way for me ...

pythonhtmldjango

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

When I try to center align text in Safari 6.1/7.0 and add word-spacing, the text is centered as if the space between words is not included in the width calculation. For example, consider this CSS: div { width:300px; border: 1px solid #CCC; } h1 { ...

csssafariwebkitosx-mavericksword-spacing

Display tables based on selected changes with dynamically changing options

My HTML structure displays rows with active and inactive statuses based on a select change, and it's currently functioning correctly. However, the project requirements have changed, allowing for more status options besides just active and inactive. I ...

javascripthtmlangularjs

Why is the label on my styled checkbox shifting position?

While custom styling a checkbox, I'm facing an issue where the label next to it keeps shifting. When unchecked, it aligns itself at the bottom of the box, but upon checking, it moves to center align with the box. .check { width: 100%; font-we ...

htmlcsscheckbox

The pop-up dialog on Facebook is limited to the width of the like button, cutting off any excess information

Feel free to check out my blog here. When attempting to click the "LIKE" button, the pop-up appears at the correct height, but the width is limited to the size of the button. Below is the CSS code I am using: .blog_social_media { float: right; b ...

htmlcssfacebookfacebook-like

I'm currently facing an AttributeError issue, and I'm seeking solutions to resolve it

Currently, I am in the process of developing an eCommerce platform using Django. However, I have encountered an issue when attempting to manipulate the quantity of each product in the cart. The error message displayed is as follows: AttributeError at /orde ...

htmldjango

Space between elements in a horizontal arrangement

While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? To address this issue, I implemented a workaround by assign ...

cssbootstrap-5

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

javascriptcssreactjsnext.jstailwind-css

What is the process for creating custom styles for MUIV5 components?

I have incorporated Mui v5 components into my project and currently I am utilizing sx props to style all the MUI components. However, it is becoming cumbersome to add sx in every line for each component. Therefore, I am seeking alternative methods for styl ...

cssreactjsmaterial-uistyled-components

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

javascripthtmlajaxdatatable

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

javascripthtmlcsshighcharts

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

Dynamic loading of jQuery elements, such as Ibuttons, seems to be causing issues when implemented with an ajax dynamic content loader. The entirety of my website is rendered through Ajax just like this: <html> <header> {jQuery} </header> ...

javascripthtmljqueryjquery-plugins

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value

I have encountered a challenge while working on a react file-upload component. The issue at hand is relatively simple - I aim to display an icon corresponding to the file extension for each uploaded file. These icons are loaded through css as background im ...

javascriptcssreactjsimageasynchronous

Image transformation not rotating the image

I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right. What am I missing that's preventing this from looking like a smooth 180-degree spin? .bl ...

htmlcsstransformcss-transforms

Creating unique div elements with varying sizes that perfectly complement each other

I'm interested in creating a grid of divs that are randomly filled, similar to the image shown. I want them to be completed in a unique way without overlapping with each other. Is there a method to achieve this? ...

phpjqueryhtmlimage

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss

Is it possible to align the link to the right side of the footer?

I am puzzled as to why the Back to top link does not float to the right of the "footer area" which has a width of 960px. Upon running my code, the back to top link ends up in the middle of the footer. Here is the snippet of my code - can anyone identify th ...

htmlcss

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

Validate HTML 5 using Jquery assistance for best results

I have a form that includes HTML 5 Validations. I am looking to display a loader only when there are no error messages from the HTML 5 validation process. I have experimented with using the onclick event of the submit button and also attempted to trigger i ...

jqueryhtml