Achieving CSS centering with translate and avoiding content overflow

I have a code snippet for centering content both horizontally and vertically. It functions properly unless there is too much content, in which case it gets cut off. Is there a CSS solution to prevent this overflow issue without involving JavaScript?

.b {
  padding: 0;
  position: absolute;
  margin: 0;
  width: 100%;
  max-width: 500px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="a">
  <div class="b">dui ut erat. Phasellus...
    ... Curabitur sit amet velit auctor arcu ullamcorper luctus. </div>
</div>

htmlcsscentering

Answer №1

To ensure full height visibility, include the CSS property max-height: 100%; as demonstrated in the code snippet below. Additionally, consider setting heights for ancestor elements and make sure they are set to 100% all the way up to body and html.

.b {
  padding: 0;
  position: absolute;
  margin: 0;
  width: 100%;
  max-width: 500px;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="a">
  <div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris...
    (Text continues...)
  </div>
</div>

Answer №2

If you're looking to center an element both horizontally and vertically, I would suggest utilizing a flexbox container.

With flexbox, achieving centralization requires just three simple styles:

Not only does this approach result in cleaner CSS code, but it also automatically prevents overflow of child elements.

Simply assign a width to the child element(s) for horizontal centering.

You can implement this as shown below:

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-child {
  width: 200px;
}
<div class="centered">
  <div class="centered-child">Your content here. </div>
</div>

I hope you find this explanation helpful! :)

Answer №3

The height of your div exceeded the page boundary when you applied a -50% transformation on the Y-axis. Consider using the following CSS:

-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);

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

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

jqueryhtmlcsspreload

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

javascripthtml

In a responsive layout, a floating div refuses to adhere to the left alignment

I am working on a dynamic list using ASP:REPEATER with floating divs aligned to the left. The current layout is as follows: +---------------------+ +---------------------+ +---------------------+ | | | | | ...

htmlcssresponsive-designcss-float

Why is it that a label tag cannot be placed directly above an input tag?

On this particular page: http://getbootstrap.com/components/#input-groups-buttons If you modify the Go! button to a label (using Chrome inspector), you will observe that the Go! button is no longer positioned on top of the input field: https://i.sstatic ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Finding the mouseover event for an element that is beneath an overlaid div

There are four div elements, and on mouseover, the selected div will get zoomed. However, I also need to capture the mouseover event for the remaining three underlying divs, even when one is overlayed. This way, I can zoom out the previously selected div a ...

javascriptjqueryhtmlcss

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

javascriptcsscss-transitionstransform

Troubleshooting innerHTML in jQuery

<script> $(document).ready(function() { var msg='{"ui":{"callData":[{"Title":"Caller Details", "Text":"<html><body><table border=&quot;1&quot;><tr><td>Caller details content</td></tr>< ...

javascriptjqueryhtml

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

phphtmlcsscodeigniter

Having trouble with your CSS dropdown menu?

I've been struggling to implement a dropdown menu on my website following an online tutorial. Despite following the steps, I can't seem to get it working. It's frustrating because I want to move on to backend development. Hoping someone can ...

htmlcss

Choosing <label> elements, while disregarding those <label> elements that include <input>

I need assistance with CSS rules to target only <label> elements that do not contain an <input> field inside of them. Is there a specific rule I can use for this? <label for="type">Regular Label</label> <label for="type"> ...

css

Having trouble with GLB file loading in three.js?

My GLB file is not displaying in my Three.js world. Despite following all the documentation and tutorials, the model is not showing up. The world loads perfectly and everything works fine, except for the model not appearing. I am on a journey to create a ...

javascripthtmlthree.js

Create dynamic modals in ReactJS that appear when a row is clicked

Engaged in a project for an undisclosed entity where patient data is retrieved from their API and displayed as modal on the page. Clicking on a modal reveals more threat information in another modal. The objective is for these modals to render based on a c ...

cssreactjstypescript

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

Utilize a select box to toggle between enabling and disabling options

Could someone please help me with enabling and disabling a text field based on a select box option? I'm not sure if I have written the code correctly below. If there are any errors, please correct me. <body> <table width="500" border="1"> ...

phpjavascriptjqueryhtmldrop-down-menu

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

Dealing with Unicode Issues in JSON Encoding and MySQL

Here is some JavaScript code that I have: The code works fine (the makewindows function has been changed to show it as a PHP variable), but there seems to be an issue with Unicode characters in the HTML. Only characters before the first Unicode character ...

phpjavascripthtmlajaxunicode