Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc.
Can be achieved using CSS or JavaScript
UPDATE:
I attempted to use Javascript's Sys.UI.DomElement.setLocation() method, but it positions the object relative to its parent rather than absolutely. Is there a way to position it absolutely?
If you want your content to be centered in the browser no matter if the page is scrolled, using position: fixed will be more reliable. Here's an updated version of mike108's code:
<style type="text/css>
.centered {
position:fixed;
z-index: 100;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
}
</style>
This code assumes that you have a fixed-size box that you want to center. If your box is not a fixed size, you may need to use JavaScript to measure the window and the div and position it accordingly (again, using fixed positioning).
Make sure to test this on all browsers to ensure compatibility. There might be some unexpected issues.
I recommend looking into JavaScript plugins that specialize in centering content for a starting point. Even if you don't use their code directly, they have already solved this problem. I believe jqModal could be a good starting point for you.
<style type="text/css>
.circle {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid #9999FF;
border-radius: 50%;
}
</style>
<div class="circle">
</div>
Make sure to specify a width (e.g. width:500px;) and then simply use margin:auto;.
Here is a block of JavaScript code I am currently using:
// center element both horizontally and vertically
setToCenterOfParent( $('#myDiv'), document.body, false, false);
// center element vertically only
setToCenterOfParent( $('#myDiv'), document.body, false, true);
// center element horizontally only
setToCenterOfParent( $('#myDiv'), document.body, true, false);
// definition of the function
function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){
parentWidth = $(parent).width();
parentHeight = $(parent).height();
elementWidth = $(element).width();
elementHeight = $(element).height();
if(!ignoreWidth)
$(element).css('left', parentWidth/2 - elementWidth/2);
if(!ignoreHeight)
$(element).css('top', parentHeight/2 - elementHeight/2);
}
Utilizing flexbox makes achieving center alignment a breeze. With Microsoft phasing out support for older Windows versions and browsers like Mozilla and Chrome constantly updating their engines, flexbox has become a staple in modern web design.
#container{
display: flex;
justify-content: center;
align-items: center;
}
Any elements directly nested within the #container will automatically be centered.
This snippet of code works wonders for tasks such as creating login menus or overlaying text on background images.
UPDATE - THE CODE BELOW IS OUTDATED, PLEASE REFER TO THE UPDATED CODE ABOVE
If you need vertical and horizontal centering combined, consider this approach...
#shell{
width:100%;
height:100%
position:absolute;
z-index:100;
background: rgba(255,255,255,.8);
display:table;
}
#inner{
margin:0 auto;
display:table-cell;
vertically-align:middle;
width: /* specify input width here */
}
#overlay_container{
width: /* specify input width here */
height: /* specify input height here */
additional-styles: /* provide explanation for added styles */
}
Take a look at this solution that eliminates the need to specify the width or height of the div box. It will always remain centered on the screen. I believe this approach will be helpful for everyone.
<style type="text/css">
.mask{
position:fixed;
z-index:100;
width:100%;
height:100%;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.75);
overflow:hidden;
}
.contener{
height:100%;
display:inline-table;
}
.contener .content{
vertical-align: middle;
display:table-cell;
}
.contener .content p{
padding:2em;
border:1px solid #3d3d3d;
background-color: #1d1d1d;
border-radius: 10px;
-moz-box-shadow: 0px 10px 10px black;
-webkit-box-shadow: 0px 10px 10px black;
box-shadow: 0px 10px 10px black;
}
</style>
<div class="mask">
<div class="contener">
<div class="content">
<p>Test string</p>
</div>
</div>
</div>
I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...
Currently, I am working on developing a web application using Nuxt.js (Vue.js). Initially, to set up the project, I used the command: vue init nuxt/express MyProject ~page/help.vue <template> <div> <p v-for="item in list"> ...
Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...
I've been working on creating a 64 square checkerboard using the html canvas element in javascript, but I'm encountering an issue. The boxes aren't rendering properly after the first 8 squares on the y-axis, and I can't figure out where ...
As someone new to Vue, I have defined my Vue code in the following way: import Vue from "vue"; export default Vue.extend({ data: () => { message: "show message"; }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js ...
I'm attempting to utilize Vue class binding depending on the index within the v-for loop. While I can see that the state in Vue dev tools is changing correctly, the class name itself isn't being updated. <div class="group" v-for= ...
While using WebStorm, I've noticed that it automatically completes JavaScript keywords as I type regular text in JSX. This behavior is starting to frustrate me because I have to constantly press ESC or click elsewhere to hide the auto-complete popup. ...
In the form below, I am automatically adding inputs using a JavaScript function like this: $('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 }); $('.Preco1').focus(); $('#sub').maskMon ...
After a user clicks on a navigation link on my website, the page is loaded into a content window within the same page using JavaScript. I then utilize HTML 5 to modify the URL and create a history entry, resulting in a URL resembling the one mentioned (). ...
When I'm running multiple tests, my browser's console gets cluttered with messages every time a file is saved. Is there a way to disable this feature? For example: [Fast Refresh] completed in 93ms hot-dev-client.js?1600:159 [Fast Refresh] rebuil ...
After checking out the example of ember.js on this website (http://todomvc.com/), I decided to clone the project onto my computer. Upon double-clicking the index.html file, the project ran smoothly, just as I had anticipated. However, following the instru ...
I am facing a challenge with my nested parent DIVs that occupy 100% of the browser window in terms of height and width. I am struggling to center secondary DIVs inside their respective parent containers. Here are the definitions for my stacked parents: # ...
As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...
Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...
I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...
I need to develop an app that can access the tabs a user has open, but I'm struggling to find a way to do so without having my app run in Chrome itself. Creating an extension restricts the UI significantly, which is problematic since my app requires a ...
Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...
Within my HTML code, I have the following: <li class="register"><a href="">Registreer</a></li> as well as <div id="content"> </div> I attempted to load an HTML file into the div using the code below in the header se ...
Hello there, I am facing a challenge with my webpage's loading speed due to the code provided below. Can you assist me in optimizing it? <xsl:template match="Category" mode="CategorySelectorScript"> <xsl:variable name="ThisCateg ...
My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...