"Perfectly Centered: Aligning Vertically and Hor

My goal is to center a box vertically and horizontally, but I'm struggling to get it just right:

HTML:

<div id="wrapper">
        <header>
            <div id="logoWrapper">
                <div class="logo">Logo Here </div><!-- Logo End -->
            </div><!-- Logo Wrapper -->
    </header>
</div><!-- Wrapper End -->

CSS:

![#wrapper{
    width:955px;
    margin:auto;
}

html body{
    background:#F1FF29;
}

#logoWrapper{
    width:429px;
    height:179px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
}
.logo{
    display:block; 
    background:red;
    width:429px;
    height:179px;
}]

Image: https://i.sstatic.net/rZ2ng.png

Answer №1

Adjust the margins of #logoWrapper to the following dimensions:

margin-left:-215px;
margin-top:-85px;

Ensure that these values are half the width and height of your logo.

Link to jsfiddle

UPDATE:

Additionally, consider adding these 'reset' styles:

html, body{
    background:#F1FF29;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 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

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

Tips for integrating tooltips in a dynamic highcharts chart

This image shows the desired final output View Highcharts here and I am looking to merge the date and stock value in a single tooltip, how can this be achieved? highcharts ...

Extracting the input data from a JSON source

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Testing AJAX Requests ...

My CSS skills are put to the test in the latest version of Safari, as they only seem to work when I move

I have been working on a CSS menu for a website and have made it work perfectly on Firefox, Chrome, and an old Safari version. However, I encountered a strange issue with the latest Safari version (6.0.2 on Lion). When the page is fully loaded and I hover ...

Developing a unique attribute using AngularJS

As a beginner in AngularJS, I am experimenting with creating directives to manipulate the background-color of a <div> based on specific conditions. I aim to write code like this within my view: <div effect-color="#2D2F2A">content here</div& ...

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

I discovered that the chips' content was in need of updating once I selected the content from the menu

I want to create a chips feature similar to Google Flights where clicking on the chips opens a menu. Currently, when I click on the chips, the menu opens up and 'Sports' is displayed as a chip. However, I want to update the 'Sports' tex ...

Automatically adapt the height of a bootstrap button based on the dimensions of other bootstrap buttons

First and foremost, my objective is to centrally align a glyphicon both vertically and horizontally within a button. Despite attempting CSS attributes like position: relative; and position: absolute;, my efforts have been in vain. You can check out the sam ...

Customize the logo height in your shinydashboard header title

I have written the following code to create a dashboard: library(shinydashboard) library(shiny) library(fresh) mytheme <- create_theme( adminlte_color( light_blue = "#004e70" ), adminlte_sidebar( width = "400px", da ...

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

What is the best way to create an HTML table using a two-dimensional list in Python?

I am currently facing an issue with the functionality of my code. The HTML is being generated as desired, but it appears at the top of the page rather than in the intended location. def fixText(self,text): row = [] z = text.find(',') ...

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

Tips for organizing appended <li> elements using jQuery

Being a novice in the realm of programming, I ask for your understanding as I pose what may seem like a simple question. Up until now, I have been unable to find a satisfactory solution to my issue. Within my HTML Code lies an unordered list, serving sole ...

Extracting data from DIV class tags, encountering VBA glitches

Trying to compile data into an Excel table from a website led me to discover this useful example, however, I encountered a VBA error. My current code is: Sub WebData() Dim http As New XMLHTTP60 Dim html As New HTMLdocument Dim currentRow As Long ...

Expand the div to fit one side of the browser

My bootstrap code looks like this: <div class="container"> <div class="row"> <div class="col-md-8">content</div> <div class="col-md-4"> <div class="map">map goes here</div> </div> </div& ...

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

Guide to placing an element behind text using Bootstrap 3

On my webpage, I have a straightforward Bootstrap Jumbotron displayed prominently: <div class="jumbotron"> <div class="container"> <h1>Welcome to My Wonderful Site</h1> <p>There's some information her ...

"Disappearing act: box-shadow magically vanishes

Currently facing a perplexing issue: In my code, there is a div called .pagebody with a box shadow assigned as follows: -webkit-box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); box-shadow: 0px 1px 10px -2px rgba(71,71,71,0.42); -moz-box-shadow: 0px 1px ...

The submission function in document.forms is causing my webpage to freeze

I have been working on a website to manage an SQL table and I encountered a situation where I needed to reload the page with new variables. To achieve this, I created a form named "rerouter" with hidden textareas and set the action to the current page (in ...

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...