Align your content in the center of any browser

My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code:

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
    html{
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
       font-weight: 20;
    }

    #description{
        position: absolute;
        top: 200px;
        left: 400px;
    }
    #content{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 100%;
        display:table-cell;
        vertical-align: middle; 
    }
    h1{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h1:hover{
      color:#4A4A4A;
    }
    h2{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h2:hover{
      color:#4A4A4A;
    }
    a{
        color:black;
        text-decoration: none;
      margin: 0px auto;
      width: 400px;
    }
    .circular{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      -webkit-border-radius: 75px;
        -moz-border-radius: 75px;
        background: url(./images/profile_picture.jpg) no-repeat;
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    }

    ul{
        padding: 0;
      text-align:center; 
      padding-top: 5
    }
    ul a img {
        padding-top: 20px;    
    }
    li{
        list-style: none;
        text-align: center;
        font-size: 30px;
        display: inline-block;
        margin-right: 10px;
    }

    #back{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        z-index: -99999;
        background-color: #f7f7f7;
        background-size: cover;
        background-position: center center;
        opacity: .2;
    }

Currently my website only centers on a 4x3 screen. How can I adjust my CSS to center on any size screen?

For HTML version of this question, you can check here.

htmlcss

Answer №1

It seems like you haven't shared your HTML code yet (for some mysterious reason)!

The key to centering an element with CSS is setting the left and right margins to auto

#wrapper
{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

This technique is similar to using margin:0 auto, which is commonly used!

Enclose your content in a 

<div id="wrapper">...</div>
and specify a width!

To center an image, apply display:block as default images have display:inline property.

#myImage
{
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Answer №2

Update: While Magesh Kumaar's answer is considered superior, this solution remains effective.

It can be a bit challenging to provide specific advice without viewing your code directly. However, to center a DIV element on any screen, consider implementing the following CSS:

#divID {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px; /* Always set at 50% of your specified width */
}

Afterward, ensure that the rest of your website content is enclosed within this centered DIV.

<div id="divID">
    INSERT YOUR WEBSITE CONTENT HERE
</div>

Answer №3

Ensure your content is properly wrapped, specify the width, and apply margin: 0 auto to the wrapper's CSS style rules.

<div id="body">
   <div id="wrap">
       <div id="center">Center</div>
   </div>
</div>

#wrap {
    margin:0 auto;
    width:50%;
}

Check out this Fiddle for a live example

Answer №4

To start, you must first establish the Div id in the HTML code like so:

<div id="content">
page elements
 </div>

Afterwards, in the CSS file, define the width and add margin properties as follows: 

#content {
    margin:0 auto;
    width:50%;
}

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, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Implement a counter in a JavaScript table, initializing it to zero

I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...

javascriptjqueryhtml

Retrieve only the most recent input value

Currently, I am working with a text input to capture user input. As of now, here is my code snippet: $(myinput).on('input', function() { $(somediv).append($(this).val()); }); While I want to continue using the append function, I am facing an i ...

javascriptjqueryhtml

Unable to close Bootstrap sidebar menu on mobile devices

I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It wor ...

javascripthtmlcssshopify

What is the maximum width that can be set for an HTML input control

I'm working on a web page with a row that contains three controls. SomeText Input Button It looks something like this <div> SomeText <Input/> <img> </div> The image is currently floating to the right. ...

htmlcss

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span has negative margins to reduce the ...

htmlcss

Is it possible to use PHP to retrieve and display an entire webpage from a separate domain?

Currently, I am working on a PHP program that allows me to load a complete webpage and navigate the site while remaining in a different domain. However, I have encountered an issue with loading stylesheets and images due to them being relative links. I am ...

phphtml

Traversing through Object consisting of dual arrays within VueJS

Currently, I am working on a chat application built in VueJS and encountering an issue when attempting to display messages along with their respective timestamps. The challenge arises from the need to iterate through an object that contains two arrays: one ...

javascripthtmlarraysvue.js

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

CSS page header not appearing on all pages when printing from TryitEditor in Safari on iOS

Experimenting in W3's TryitEditor, I am currently using the following CSS: p.hr { position: running(header) } @media print { .pagebreak { page-break-before: always; } @page { @top-center { content: element(header); } } } Ther ...

htmlcssiossafari

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

javascriptjquerycss

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

Learn the process of utilizing Uglify.js to combine JavaScript files for individual views within Express.js

My website is currently built on express.js and I am looking to optimize my JavaScript files using uglify.js in the build process. An example of a typical view on my site appears as follows: extend layout block head script(src="/js/polyfills/html5s ...

javascripthtmlnode.jsexpressuglifyjs

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

Striving to make edits that will reflect changes in the database, however, I continue to encounter error CS0123 stating that there is no matching overload for 'Insert_Click' with the delegate 'EventHandler'

Welcome to the front-end of my webpage: <div class="div"> <asp:Button style="background-color: #007aff; width: 100%; padding: 5px" Text="SAVE" OnClick="Insert_Click" ID="InsertID" runat="s ...

c#htmlasp.netsql-server

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

htmlangularjsangularjs-ng-clickng-bind-html

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...

javascriptjqueryhtmlcss

Is there a way to ensure certain items are displayed on different lines?

Currently, I am working on styling an HTML list with the following properties: font-weight: bold; padding: 0px; margin: 0px; list-style-type: none; display: block; width:700px; font-size: 14px; white-space: pre-wrap; The individual cells within this list ...

htmlcsshtml-lists