How to center div using JQuery or CSS

Question

I am trying to center my div using the JQuery function I found here. I tried centering my div using CSS as well it does not work. Any direction on where I am wrong would be helpful.

Sorry about the page formatting but I am trying to center "allResults" div which contains all my other divs (Please refer to code attached). According to my understanding, if I can center the main div(allResults, which contains all other divs), divs inside "allResults" div should center aswell.

* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}

div#main-content {
    margin-top: 100px;
 font-family: sans-serif;
}

div#disclaimer {
    width: 800px;
    height: 467px;
    margin: 0 auto;
    margin-top: 200px;
    background: #EFDFBC;
    padding: 30px 10px 10px 0px;
}

div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: #bf2e1a;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: #bf2e1a;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    text-align: center;
    color: #bf2e1a;
    font-size: 33px;
    padding-top: 25px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
 text-align: -webkit-left;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
 font-family: sans-serif;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}

label#threeYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}


/*label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}

label#fourYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}

label#fiveYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: #bf2e1a;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/

.clientinfo{
 height:445px;
    background-color: #EFDFBC;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 10px 0px 1px 70px;
}

input[type="text"] {
    background-color: white;
    padding: 4px 0px 0px 10px;
    margin: 0px 0px 0px 70px;
}

button {
    display: block;
    margin: 0 auto;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: 45px;
    color: #EFDFBC;
}

button#start {
    display: block;
    margin: 0 auto;
    width: 200px;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: -272px;
    margin-right: 68px;
}

hr {
    width: 165px;
    padding: 1px 0px 0px 0px;
}

div#disclaimer {
    width: 800px;
    padding: 27px 10px 10px 0px;
}

div#questionOneBody {
    background: #EFDFBC;
}
div#questionTwoBody {
    background: #EFDFBC;
}
div#questionThreeBody {
    background: #EFDFBC;
}
div#questionFourBody {
    background: #EFDFBC;
}
div#questionFiveBody {
    background: #EFDFBC;
}
h1 {
    /* padding: 20px 4px 20px; */
    text-align: center;
    margin-top: 25px;
}
/*
h1 {
    //background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}
*/

h1#disclaimerHeader {
    background: #EFDFBC;
    /* padding: 20px 0px 20px 0px; */
    text-align: center;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 1px 0px 0px 20px;
}

div#disc-container {
    width: 450px;
    background: #EFDFBC;
    padding: 10px 10px 14px 10px;
    border-style: solid;
    border-color: #bf2e1a;
    border-width: 10px;
    margin-left: 20px;
}

a#disclaimerLink {
    text-decoration: none;
}


/*.hideHeader{
 display:none;
}*/

p#greenText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: green;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#yellowText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: yellow;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p##bf2e1aText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: #bf2e1a;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}

div#questionHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

/*div#resultHeader {
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

div#resultHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    font-size: 28px;
    border-width: 10px;
}*/

div#resultHeader {
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    margin-left: 110px;
    width: 1170px;
    font-size: 28px;
    border-width: 10px;
}

div#quizResult {
    font-size: 20px;
    /* width: 650px; */
    margin: 0 auto;
    background: #EFDFBC;
    height: 600px;
    margin-top: 10px;
}

div#allResult {
    /*margin: 0 auto;
    margin-left: -350px;
    margin-right: -350px;
     background: #EFDFBC; */
}

div#leftResult {
    background: #EFDFBC;
    width: 610px;
}

div#result {
    background: #EFDFBC;
    height: 634px;
    font-size: 24.5px;
    width: 450px;
    margin-left: 110px;
    padding: 88px 45px 0px 70px;
    //font-family: sans-serif;
}

hr#eligibleHr {
    position: absolute;
    margin-top: 57px;
    width: 300px;
    margin-left: 182px;
}

div#calenderToolSideText {
    background: #EFDFBC;
    /* width: 300px; */
    margin-left: 551px;
    margin-bottom: -18px;
    margin-top: -334px;
    padding: 0px 68px 0px 0px;
}

div#rightSide {
    background: #EFDFBC;
    margin-left: 480px;
    margin-top: -659px;
    height: 634px;
    width: 800px;
}

div#rightSide h1 {

    text-align: center;
    margin-top: 25px;
    margin-right: 24px;
    background: #EFDFBC;
    color: #bf2e1a;
    padding: 18px 10px 10px 10px;
}

hr#consultationHR {
    width: 595px;
    margin-right: 77px;
    margin-top: -29px;
}

div#calenderTool {
    background: blue;
    width: 400px;
    height: 330px;
    margin-top: 25px;
    margin-left: 148px;
}

hr#endingHR {
    width: 495px;
    margin-top: 25px;
    color: #bf2e1a;
    width: 597px;
    margin-right: 76px;
    margin-top: 25px;
}

h3#shareQuiz {
    margin-right: 300px;
    margin-top: -9px;
}

p#rightsidePara {
    margin-left: 131px;
    margin-top: -12px;
    color: #bf2e1a;
 padding: 1px 0px 0px 20px;
}

p#rightsideParaTwo {
    margin-left: 136px;
    color: #bf2e1a;
}

h1#eligibleHeader {
    position: absolute;
    margin-left: 180px;
    margin-top: 20px;
    background: #EFDFBC;
    color: #bf2e1a;
}

div#images {
    margin-left: 550px;
    margin-top: -85px;
    background: #EFDFBC;
}
p#bkrwebsite {
    margin-left: 550px;
    color: #bf2e1a;
}

h3#clientHeader {
    background: #EFDFBC;
    text-align: center;
    color: #bf2e1a;
    font-size: 23px;
    padding-top: 25px;
    /* height: 400px; */
}

hr#clienFormHr {
    margin-left: 45px;
    margin-top: 40px;
}

div#clientForm {
    background: #EFDFBC;
    margin-top: 33px;
    margin-left: 82px;
}


div#clientInfoBody {
    background: #EFDFBC;
    width: 425px;
    height: 480px;
    margin: 0 auto;
}

input#client-info-submit {
    display: inline-block;
    /* margin: 85px; */
    /* margin: 0 auto; */
    margin-left: 45px;
    margin-top: 12px;
    padding: 10px 30px;
    background-color: #bf2e1a;
    /* border-color: #ddd; */
    font-size: 33px;
    text-align: center;
}

div#clienQuestionHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
    margin-left: 113px;
    margin-right: 110px;
}


input#clientName {
    margin-left: 10px;
    padding: 5px 80px 5px 10px;
 margin-left: 0px;
}

input#clientEmail {
    margin-left: 0px;
    padding: 5px 80px 5px 10px;
    margin-top: 5px;
}

input#clientPhone {
    margin-left: 0px;
    padding: 5px 80px 5px 10px;
    margin-top: 5px;
}

div#clientNameDiv {
    background: #EFDFBC;
}

div#clientEmailDiv {
    background: #EFDFBC;
}

div#clientPhoneDiv {
    background: #EFDFBC;
}

label#clientNameLabel {
    background: #EFDFBC;
    font-size: 24px;
}

label#clientEmailLabel {
    background: #EFDFBC;
    font-size: 24px;
}

label#clientPhoneLabel {
    background: #EFDFBC;
    font-size: 24px;
}


.verticalLine {
    width: 2px;
    height: 570px;
    position: absolute;
    margin-left: 591px;
    margin-top: -615px;
}


.bkr-header{
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 600px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 445px;
    background: #EFDFBC;
}
.visible2 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 165px;
    background: #EFDFBC;
}

.visible4 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 195px;
    background: #EFDFBC;
}

.visibleHeader {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}

.page {
 display: none;
}

.page.active {
    display: block;
    margin: 0 auto;
    width: 650px;
}

.green{
 color:green;
}

.yellow{
 color:yellow;
}

.red{
 color:red;
}


.questions {
    margin: 0px auto;
    width: 650px;
    height: 444px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.quiz-questions {
    margin-top: 100px;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset = "UTF-8"/>
 <title>Questions</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
 <div id="allResult">
  <div id="resultHeader">
   <h1> Congratulations </h1>
  </div>
  <h1 id="eligibleHeader"> You might be eligible. </h1>
  <hr id="eligibleHr">
  <div id="result">
  </div>

  <!-- Vertical Line -->
  <div class="verticalLine">
  </div>

  <!-- Vertical Line End -->
  <div id="rightSide">
   <h1>Schedule your free consultation now.</h1>
   <hr id="consultationHR">
   <div id="calenderTool">
   </div>
   <div id="calenderToolSideText">
    <p>Use this calender to schedule your appointment,
    or call our office to have someone do it for you.
    </p>
    <p>Because you pre-qualify, the consultation is free.</p>
    <br>
    <p></p>
    <p>M - F, 8:30 am - 5:00 pm </p> 
   </div>
   <hr id="endingHR">
   <h3 id="shareQuiz"> Share the quiz </h3>
   <p id="rightsidePara"> Your friends won't see your results,</p>
   <p id="rightsideParaTwo">just alink to take it themselves. </p>
   <div id="images">
    <img id ="facebook" src="logos/FacebookIcon.png"></img>
    <img id ="twitter" src="logos/TwitterIcon.png"></img>
    <img id ="googleplus" src="logos/GooglePlusIcon.png"></img>    
   </div>
   <p id="rwebsite">www.r.com</p>
  </div>
 </div> 
</body>
</html>

<script type="text/javascript">
el = document.getElementById("allResult");
var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
     return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};
</script>

Dejan.S · Accepted Answer · 2016-11-06T21:31:37.333

2

You can center a div with only css, you set a width and margin the 0 is for top and bottom, auto makes it center. I would also recommend you not to use ids, if you want to style use classes instead. Also camelCase syntax it not recommended for css, better to use some-class

<div id="allResult">
    ...
</div>

CSS

#allResult {
    margin: 0 auto;
    width: 1024px;
    overflow: hidden;
}

edited Nov 06 '16 at 21:31

answered Nov 06 '16 at 21:21

Dejan.S

18,571
22
69
112

I have tried to set the width property but it makes the div go right instead of the center. If i set the width to 1350px , it looks like its in the center but is there a better way to do this? – Maddy Nov 06 '16 at 21:24
Are you using `margin`? it's something else has made it bad in your markup. Look at my edited answer and try that. Best way is with css @Mani – Dejan.S Nov 06 '16 at 21:31
It is something to do with my css itself. I need to clean up the CSS but you solution works. Thanks – Maddy Nov 06 '16 at 21:34

How to center div using JQuery or CSS

1 Answers1