Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and some text in the first section displayed at the center of the screen as a cohesive group. Any assistance would be greatly appreciated!

Check out this code on jsFiddle

HTML:

<section class="red-bg">
    <div class="middle">
        <img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
        <h1>Insert text here.</h1>
    </div>
</section>

<section class="blue-bg">
    <p>Another section content goes here.</p>
</section>

CSS:

body {
    color: #fff;
}

section {
    width: 100%;
    height: 100vh;
}

.middle {
    /* Need to align vertically and horizontally */
}

.red-bg {
    background-color: #f00;
}

.blue-bg {
    background-color: #00f;
}

Answer №1

consider using flexbox for layout

body {
    color: #fff;
}

section {
    width: 100%;
    height: 100vh;
    display : flex;
}

.middle {
    /* ensure vertical and horizontal alignment */
  margin : auto;
}

.red-bg {
    background-color: #f00;
}

.blue-bg {
    background-color: #00f;
}
<section class="red-bg">
    <div class="middle">
        <img src="http://lorempixel.com/g/300/300/abstract/" alt="" />
        <h1>Some text here.</h1>
    </div>
</section>

<section class="blue-bg">
    <p>Another section here.</p>
</section>

Answer №2

Give this a try! http://jsfiddle.net/stybfgju/1/

.center {
    /* vertical alignment */
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    /* horizontal alignment */
    margin: 0 auto;
    display: table;
}
  • If you switch display to block, ensure to set the width explicitly
  • Add text-align: center if required.

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

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

The webpage is displaying an error stating that "<function> is not defined."

I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...

Creating an image in jpg format from an html file using a button

I have a unique HTML code for an email signature from my company and I am looking to add a button that can generate a JPG or PNG image of the signature without having to resort to PrintScreen and manual cropping in editing tools like Paint or Photoshop. Ho ...

The card-img-overlay in Bootstrap 5 seamlessly integrates into the following div container

Currently, I am in the process of creating a painting website layout for my CS50 homepage. However, there seems to be an issue with the background-color: rgba(0,0,0,0.7); not aligning correctly with the images within the card-group. <div class="car ...

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

Using PHP to nest a table within HTML and populate it with numbers ranging from 1 to 100

I am struggling with a practice question that involves creating a table using PHP nested in HTML. I need some help fixing it and understanding where I went wrong. The task is simple: generate numbers from 1 to 100 in a table, with each row containing 10 n ...

Creating a JavaScript file to incorporate into an HTML document

I stumbled upon this code snippet here This code allows me to fetch data from a php file and insert it into a div using jQuery. While the tutorial works perfectly, I'm planning to use this for about 9-10 different links and thought of consolidating a ...

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

Can you tell me about the feature called "Inspect Browser" box?

Can you identify the significance of this enigmatic purple box while inspecting elements in the browser's developer tools? It does not correspond to padding, margins, or borders, yet it seems to be occupying space within the designated div. [1]: http ...

How can JavaScript be used to create a unique signup and login process on

I am struggling with storing sign up and login details in JavaScript. In my previous project, I used PHP and a database to handle this information, so transitioning to JavaScript has been challenging. Here is an example of the sign-up HTML code: <!DOC ...

Is it possible for image.src to pose a security threat?

Here is the code snippet I am working with: var image = new Image(); image.src = "https://MyTrackingSite.com/?myTrackingParameter=whatever" I noticed that the image is not added to the DOM tree. Is it still rendered by the command "image.src"? Could this ...

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

In HTML, specify that the height of both the `html` and

I am facing an issue with the container-about div. I have set its height to 100% so that the div occupies the entire width and height after the header div. The problem is that currently, I cannot scroll to view the full text. It would be great if there wa ...

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

Troubleshooting custom fonts not displaying on a .NET website: Importing fonts for web use

https://i.stack.imgur.com/uWSsY.pngI am well-versed in HTML, but my knowledge of VB.NET is limited. In standard CSS, including a font like the one below would typically work, but I have encountered issues when attempting to do so in .NET. @font-face { f ...

Utilizing offsets/push in the correct manner

I have been developing a Bootstrap website and I wanted to get some feedback on my current code structure. The design is coming along nicely, but I am unsure if this aligns with best practices? <div class="container-fluid"> <div class="row"> ...

Failure to respond to dual part form by RemoveClass

Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...