我想把一个div分到另一个，但它没有用。我只能水平居中。但是垂直它不起作用。我试图在很多方面做到但尚未奏效。我希望myDIV位于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>`
答案 0 :(得分：0)
只需使用display:table和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>
答案 1 :(得分：0)
尝试删除inline-css（样式）属性，而不是将它们添加到CSS类中。如果要覆盖某些CSS属性，可以使用：some-property: !important;
除此之外，这里有一个广泛的指南来对齐任何类型的元素，中心或中间：https://css-tricks.com/centering-css-complete-guide/
答案 2 :(得分：0)
使用转换！
CSS transform属性与IE8及更早版本的所有浏览器兼容。
要将内部div置于外部中心，请执行以下操作：
#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>