What is the best way to maintain a div centered when the browser window shrinks smaller than the div's dimensions?

Is there a way to keep a div centered and create white space around it when the browser window is resized? I want this effect to happen whether the browser window gets larger or smaller. Currently, when the window size decreases, the left side of the div locks in place, causing only a small portion of the image to be visible instead of keeping the center intact. Apologies if my question is a bit confusing, I'm still new to programming. Any guidance on this issue would be greatly appreciated. Thank you in advance! :)

p.s I'm also having trouble getting a video to play on the page, any assistance with that would be helpful too

Provided below is my current code:

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

#page-container {
  width: 1920px;
  margin: auto;
}
<div id="page-container">
  <video id="backgroundvid" width="auto" autoplay>
    <source src="assets/video/portalAnimLowRes.mp4" type="video/mp4">
  </video>
</div>

javascripthtmlcss

Answer №1

Feel free to experiment with

#content-wrapper {
    width:1440px;
    margin-left: -720px;
    position: absolute;
    left: 50%;
}

Answer №2

To achieve the desired effect, you can set the pageContainer to have an absolute positioning like this:

#page-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
}

Answer №3

Are you looking to avoid the horizontal scroll bar?

If so, I suggest not specifying a fixed width (especially in pixels) as device widths vary.

Instead, consider using width:100% or width:100vw to make the div adjust to the screen size.

Give this code a try:

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0 auto;
  padding: 0;
}
#page-container {
  width: 100%;
  margin: auto;
}

Answer №4

Have you considered using flexbox for layout?

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

#page-container {
  width: 1920px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div id="page-container">
  <img src="https://placeimg.com/640/480/any">
</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

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss

What are the benefits of incorporating a mock AJAX call in testing scenarios?

I recently came across a tutorial on TDD React here and I'm having trouble understanding the following test scenario: it('Correctly updates the state after AJAX call in `componentDidMount` was made', (done) => { nock('https://api. ...

javascripttestingreactjstddnock

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

htmlcsstypescriptmaterial-ui

Having trouble locating an element, Sammy?

I am encountering an issue while using Sammy for my SPA. The error message I receive is: [Sun Mar 29 2020 17:37:19 GMT+0300 (Eastern European Summer Time)] #main 404 Not Found get / Error: 404 Not Found get / at Sammy.Application.error (sammy-latest ...

javascriptjquerysingle-page-applicationsammy.js

using spread operator to extract properties from API response objects

Currently undergoing a React/Next course, we recently had to retrieve data from an API that returns a list of objects containing information to populate the page. This task was accomplished using Next's getStaticProps method, passing the data to the ...

javascriptjsonreactjsnext.jsspread-syntax

Updating a Json array by including a new property using the Gson library

Using Gson, I am serializing a list of objects in the following manner: String responseMessage = new Gson().toJson(pages.get(pagenumber)); Now, I want to include an additional property that can be accessed in JavaScript, which is not related to the list ...

javascriptjsongson

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

phphtmlbootstrap-5

CSS3 Marquee Effect - puzzled

After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome ...

htmlcssvalidationcss-animationsmarquee

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

Angular generates an array that is not native to the system

When I directly set vm.files in my view using the following code: <input type="file" ng-model= vm.files[0]> <input type="file" ng-model= vm.files[1]> The contents of vm.files are displayed as shown in example A: https://i.stack.imgur.com/K3V ...

javascriptangularjsarraysng-file-upload

Developing object instances using AngularJS

Looking for some guidance on creating an object using Angular's factory capabilities since I'm new to AngularJS. Here's the code snippet that I have: angular.module('7minWorkout') .factory('WorkoutPlan', function(args){ ...

javascriptangularjs

Ways to increase the font size of the text within the button for forum actions

<form action="https://www.kroger.com/account/communityrewards/" > <input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" /> </form> I'm interested in learning how to increase the font size of the form action ...

htmlcss

Creating a promise to write data to a file

When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...

javascriptnode.jses6-promisefs

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

Tips for building a carousel-style transition using React Router

I am looking to implement a carousel animation in my React Router. My website has pages named A, B, C, and D. When transitioning from page A to B, I want the animation to move from right to left. When going from B to A, I want it to move from left to rig ...

javascriptcssreactjstransition

Restrict the selection of dates in the jQuery UI datepicker by disabling public holidays, weekends, the next day after 10am, and only allowing Tuesday, Wednesday, and Thursday as

I found a code snippet on disabling weekends, public holidays, and the next day after 10 am using JQuery UI Datepicker. However, I'm facing an issue where I want to restrict selections to only Tuesday, Wednesday, and Thursday. // JavaScript logic for ...

javascriptjqueryjquery-uidatepickerjquery-ui-datepicker

Why is the abort function in JavaScript important?

What possible scenarios would require me to utilize this feature? ...

javascriptajax

Preventing the cascading effects of past hovers with AngularJS

I am working with AngularJS and have the following HTML code snippet. <div class="row" style="margin-left:60px; text-align:center;"> <div class="col-xs-1 " style="margin-left:25px;width:10px; " ng-repeat="image_thumb_id in image_thumbnail_ ...

htmlcssangularjs

Modify an element on one webpage using a function called from another webpage

I am currently working on a website design that involves displaying images on various frames. While I have managed to change content across different frames, I am now exploring the possibility of changing content across different web pages. Here is the se ...

javascriptjqueryonclick