Why is the centered div being clipped at the top?

If you visit this link, you can see the page in progress:

This piece of code is what I'm using to center the div element:

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  width: 70%;
  height: auto;
  padding: 20px;  
  background-color:rgba(255, 255, 255, 0.2);
  color: white;
  text-align: center;
  border-radius:5px;
  border:2px solid rgba(255, 255, 255, 0.5);
}

However, when I resize my browser window or view it on a mobile device, part of the content at the top of the page gets cut off.

I want the div to always be centered no matter the width of the browser. But if the height becomes too small, I would rather have some margin space added to the top and bottom while ensuring all text remains visible.

What am I missing in my implementation that's causing this issue?

htmlcss

Answer №1

One drawback of the positioning technique (top 50% minus translateY -50%) mentioned is that it centers based on its own height, causing alignment issues when the viewport height changes. Using flexbox is a better alternative for centering elements (http://caniuse.com/#search=flex).

To ensure consistent centering regardless of viewport size, wrap the container in a centered-wrapper and apply flexbox properties like so:

.centered-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

The min-height property is crucial to maintain proper centering. If the parent div doesn't span the full page height, it will center its child content within. Setting the height of the page itself may also be necessary for relative sizing:

html,
body {
  height: 100%;
}

No additional centering styles are needed for the centered div, just aesthetic adjustments.

Check out this functional example here: https://jsfiddle.net/vfc9n7p2/

Answer №2

   body {
    display: flex;
    flex-direction: column;
    justify-content: center;
   }
   div {
    width: 70%;
    height: auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    text-align: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto;
   }

this style will suit your needs perfectly.

Answer №3

<br clear="all">

I have successfully implemented this solution. Simply insert the code snippet before your content element, such as a 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

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

javascripthtmlcsshtml5-canvas

Tips for aligning the text horizontally in an input field with a neighboring element

Hello amazing community, I'm searching for a neat way to align the text of an element horizontally with that of an Angular Material input field. Here is the code I am using: <div style="display: flex"> <div>Greeting: </div> ...

htmlcssangularangular-material

Issues with CodeIgniter paths causing disruption to CSS background-image declaration

I've been working on a website with backend for two separate customers, each with their own unique URLs. I encountered an issue with Javascript links (ajax calls using url:) but managed to resolve it by using a global variable: var SiteURL='< ...

phpcsscodeigniter

How can I customize the color of the selected Leaflet GeoJSON FeatureLayer and its border?

Learn how to customize the fill and border color for leaflet GeoJSON layers with the following options. /** * Generates GeoJSON layers and assigns event handlers. */ private createGeoJsonLayer(geodata: any, map: L.Map): L.GeoJSON<any> { c ...

javascriptcssangularleaflet

Transforming an HTML document into a C# string representation

I need help creating a basic HTML file and then dynamically loading it as a string in C#. I attempted using File.Open, but the file is located separately from the binary code. Is there an easy way to instruct the build process to load it into a string? ...

c#asp.nethtml

Can you switch between displaying and concealing a dropdown in the same location based on chosen values?

I have four dropdowns listed, but I only want to display one at a time. Depending on the selected values, when I try to show a dropdown, it does not replace the current one; instead, it just appears next to the existing dropdown. Is there a way to keep th ...

javascriptjavajqueryhtmluser-interface

Is it possible to add a class to the parent element when the input value of a sub-child element is

Is there a way to select and add a class to an li element in which the sub-child input is empty when clicking on button #btn-modal-clear? If so, what is the best approach to achieve this? Example HTML Code: <li>...<li> <li> <a c ...

javascriptjqueryhtmlcss

Exiting the modal/popup box is currently disabled

I am struggling to figure out why the modal box/pop up is not closing when I click 'x'. It seems completely unresponsive. Check out the JavaScript code below: var kite = document.getElementById("poptext"); var kitetwo = document.getElementById( ...

javascripthtmlcss

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

How to Combine Various Conditions in a ngStyle Directive?

I am working with a NgStyle Tag and would like to incorporate multiple conditions, but I am encountering issues where it doesn't work or produces errors. Here is the code snippet that I have been experimenting with: <div class = "card" [ngStyle] ...

cssangular

How can I make the Bootstrap 4 checkbox/switch control smaller using the -sm class?

When using BS4, it is possible to add a custom switch/checkbox to a form. However, the small (-sm) modification does not seem to work. I have included a code sample and an image for reference. https://i.sstatic.net/8bhKz.png My goal is to make the switch ...

cssformsbootstrap-4

The z-index property is affected by CSS transform

I have encountered multiple questions on this issue, but none of the suggested solutions seem to work for me. I have a grid of boxes with CSS transforms applied to each. Upon page load, jQuery appends an invisible pop-up <div> to each box. When hover ...

jqueryhtmlcsstransformz-index

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to align an image underneath text?

I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below th ...

htmlcssreactjsnext.jsstyled-components

Slider Volume with jQuery

Struggling to find a solution for this issue. Seeking some assistance. My goal is to create a basic volume slider. So, the orange section represents my volume slider. This is the jQuery code I am using: var mouseIsDown = false; $("#volSlider").on("mou ...

javascriptjqueryhtmlcss

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

css

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

phphtmlformsmysqliecho

Seeking resolution for slight CSS issue in VueJS drag and drop functionality

I've been working on a VueJS project that requires a drag & drop + nestable feature, as illustrated below. I have made significant progress, but I am struggling with a recursive function issue. Could anyone help me troubleshoot this? A JSFiddle link ...

jquerycssvue.jsvuejs2

Using jQuery UI Dialog to delay the appearance of content after :after in IE8

My current approach involves using the :after selector to include asterisks next to required labels: .field-name { color: #444; font-family: verdana; font-size: 0.85em; line-height: 2em; } .field-name.required:after { content: '*&a ...

htmlcssjquery-ui

What is the method for calculating values entered into dynamic input fields?

I am facing a slight issue with my HTML form code... Within my code, there are several input fields that are being generated dynamically. Each dynamic input field contains a numerical value which I need to use for mathematical calculations. The calculati ...

javascriptjqueryhtmlarrays