center a div into another vertically and horizontally

Question

I'm tyring to senter a div into another one , but it is not working . i'm able to center it only horizontally. But vertically it is not working. i tried to do it in many ways but not yet working. I want myDIV to be place in the middle of the ZP div

here is the whole code : 

<!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    /*styling here*/

    #myDIV {
        border: 1px solid black;
        margin-bottom: 10px;
        width: 500px;
        height: 300px;
        box-sizing: border-box;
        border: solid #000 2px;
        background-color: #FF9966;
        text-align: center;

           resize: both;
        overflow: auto;

        margin: 0 auto;
    position: relative;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;

        margin: auto;
    }

    .myDIV1 {
    background-color:#33FF99;
    }

    .avatar {
    width : 20px;
    height : 20px;
   }

    .ZP {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        overflow: hidden;
        background-color: #ccc;
    }

    .ZE {
        position: fixed;
        width: 500px;
        height: 100px;
        background-color: #73AD81;
        overflow: hidden;
        border-radius: 20px 20px;
        border: 2px solid #965D31;
    }
    .ZE1 {
        display: block;
        top: 0;
        left: calc(50% - 250px);
        transform: rotate(180deg);
    }

    .ZE2 {
        top: 0;
        left: calc(85% - 250px);
        transform: rotate(180deg);
    }

    .ZE3 {
        top: calc(50% - 50px);
        left: calc(100% - 300px);
        transform: rotate(270deg);
    }

    .ZE4 {
        top: calc(100% - 100px);
        left: calc(85% - 250px);
        transform: rotate(0deg);
    }

    .ZE5 {
        top: calc(100% - 100px);
        left: calc(50% - 250px);
        transform: rotate(0deg);
    }

    .ZE6 {
        top: calc(100% - 100px);
        left: calc(15% - 250px);
        transform: rotate(0deg);
    }

    .ZE7 {
        top: calc(50% - 50px);
        left: -200px;
        transform: rotate(90deg);
    }

    .ZE8 {
        top: 0;
        left: calc(15% - 250px);
        transform: rotate(180deg);
    }

    </style>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

            <!--The above library(/socket.io/socket.io.js) will be generated by socket.io module of server -->
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="ZonePartage.js"></script>
    <script src="ZoneCollaborative.js"></script>
    <script src="Constante.js"></script>
    <script src="ZoneEchange.js"></script>
    <script src="Artifact.js"></script>
    <script src="Serveur.js"></script>
    <script src="User.js"></script>



    </head>
    <body id = view>
    <script>
      $(function() {
        $( "#myDIV" ).draggable();
      });



    </script>

    <div class="content" >
    </div>
    <script type="text/javascript">
    var socket = io.connect('/');

    socket.on('connection', function () { 
        alert('Le serveur de ZP a un message pour vous : ' );

    })

    //you can replace localhost with your public domain name too!!
    socket.on("message",function(artefact){  
        /*
            When server sends data to the client it will trigger "message" event on the client side , by 
            using socket.on("message") , one cna listen for the ,message event and associate a callback to 
            be executed . The Callback function gets the dat sent from the server 
        */
        console.log("Message from the server arrived")
        artefact = JSON.parse(artefact);
        console.log(artefact); /*converting the data into JS object */
        $('#myDIV').append('<div > <h1>'+artefact.title+' </h1> <h2> '+artefact.message+'</h2> </div>'); /*appending the data on the page using Jquery */

    });
    socket.on("image",function(image){  
        /*
            When server sends data to the client it will trigger "message" event on the client side , by 
            using socket.on("message") , one cna listen for the ,message event and associate a callback to 
            be executed . The Callback function gets the dat sent from the server 
        */
        console.log("Message from the server arrived")
        image = JSON.parse(image);
        console.log(message); /*converting the data into JS object */
        $('#yas').append('<div >'+image.data+'</div>'); /*appending the data on the page using Jquery */

    });

    //functions 
    //function appelÃ© qd le drag commence
    function dragIt(theEvent) {
    //dire au navigateur ce qu'il faut glisser
    theEvent.dataTransfer.setData("Text", theEvent.target.id);
    }
    //fonction appelÃ©e lorsque l'Ã©lÃ©ment drops
    function dropIt(theEvent) {
    //Obtenir une rÃ©fÃ©rence Ã  l'Ã©lÃ©ment dragged
    var theData = theEvent.dataTransfer.getData("Text");
    //Obtenir l'Ã©lÃ©ment
    var theDraggedElement = document.getElementById(theData);
    //Ajouter Ã  l' Ã©lÃ©ment de drop
    theEvent.target.appendChild(theDraggedElement);
    //Charger le navigateur pour permettre le drop
    theEvent.preventDefault();
    }
    </script>
    <!--elements de la page-->



    <div class="pics">

    <div class="ZP"   style="text-align: center;" ondrop="dropIt(event);" ondragover="event.preventDefault();">

    <div id="myDIV" class="ui-widget-content draggable" draggable="true" ondragstart="dragIt(event);" id="pic1">

    ARTEFACT
    </div>




    </div>
    <div class="ZE ZE1"  ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img src="flower.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="ppic1" />
    <img id="avatar"; src="avatar1.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: 527.5px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
            class="back"></span>

    <div class="ZE ZE2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar2.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: 1176.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
            class="back"></span>

    <div class="ZE ZE3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar3.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: 1405px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(270deg); opacity: 0;"
            class="back"></span>

    <div class="ZE ZE4"  ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar4.png" style=" width: 40px; height: 40px" />

    </div>
    <span
            style="left: 1176.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
            class="back"></span>
    <div class="ZE ZE5" id=momo  ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar5.png" style=" width: 40px; height: 40px" />
    </div>
        <span
            style="left: 527.5px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
            class="back"></span>

    <div class="ZE ZE6" ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar6.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: -121.75px; top: 785px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(0deg); opacity: 0;"
            class="back"></span>
    <div class="ZE ZE7" ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar7.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: -350px; top: 392.5px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(90deg); opacity: 0;"
            class="back"></span>
    <div class="ZE ZE8" ondrop="dropIt(event);" ondragover="event.preventDefault();">
    <img id="avatar"; src="avatar8.png" style=" width: 40px; height: 40px" />
    </div>
    <span
            style="left: -121.75px; top: 0px; width: 800px; height: 200px; transform: translate(0px, 0px) scale(1) rotate(180deg); opacity: 0;"
            class="back"></span>

            </div>

    </body>
    </html>`

score 0 · Answer 1 · answered Apr 13 '16 at 09:54

Just use display:table and display:table-cell:

html,body
{
  position:absolute;
  width:100%;
  height:100%;
}
.main-container
{
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:100%;
}

.outer
{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.box
{
    display: inline-block;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;  
}

<div class="main-container">
  <div class="outer">
    <div class="box">
      <p>Centered</p>
    </div>
  </div>
 </div>

score 0 · Answer 2 · answered Apr 13 '16 at 09:57

Try removing the inline-css (style) attributes and rather add them in your CSS classes. If you want to override some CSS property, you can use: some-property: !important;

Other than that, here is an extensive guide to aligning any kind of element, center, or middle: https://css-tricks.com/centering-css-complete-guide/

SteeveDroz · Answer 3 · 2016-04-13T12:46:38.953

0

Use transform!

The CSS transform property is compatible with all browsers, except IE8 and older.

To center the inner div in the outer, do as follow:

#outer {
  /* Other positions work too, but you need one */
  position: relative;
  
  /* For testing purpose: */
  height:300px;
  width:400px;
  background:red;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: -webkit-translate(-50%, -50%);
  -moz-transform: -moz-translate(-50%, -50%);
  -ms-transform: -ms-translate(-50%, -50%);
  -o-transform: -o-translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
  /* for testing purpose: */
  background:blue;
}

<div id="outer">
  <div id="inner">Content</div>
</div>

edited Apr 13 '16 at 12:46

answered Apr 13 '16 at 10:04

SteeveDroz

6,006
6
33
65

Why not, but transform is a CSS3 property, so not compatible with some browsers, at the time – Vincent Apr 13 '16 at 10:59
yes, but still not compatible with I.E 8 and earlier http://caniuse.com/#search=transform – Vincent Apr 13 '16 at 11:04
1

You're right, I'll warn about it in the answer... those 0.77% of people are a pain in the web... – SteeveDroz Apr 13 '16 at 12:44

center a div into another vertically and horizontally

3 Answers3