margin：0 auto;是不是工作把另一个div的一个div中心

我正在开发一个网页，我试图把一个div精确的中心放在另一个div上，为此，我使用的是margin:0 auto;，但它不能在代码中工作。请帮我，我可以把LogoDiv完全放在backgroundDiv的中心。margin：0 auto;是不是工作把另一个div的一个div中心

/*css file */ 
 

 
body 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; \t 
 
\t position:relative; 
 
\t overflow-x:hidden; 
 
} 
 

 
* 
 
{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.container 
 
{ 
 
\t max-width:100%; 
 
\t border:1px solid rgba(6,0,0,1.00); 
 
\t margin:auto; 
 
} 
 

 
.backgrounddiv 
 
{ 
 
\t background:url('../images/bg_page_01.png'); 
 
\t background-size:100%; 
 
\t background-repeat:no-repeat; 
 
\t height:800px; 
 
} 
 

 
.LogoDiv 
 
{ 
 
    clear:both; 
 
\t position:absolute; 
 
\t background:url('../images/logo_fianl.png'); 
 
\t background-size:100%; 
 
\t background-repeat:no-repeat; 
 
\t height:250px; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/> 
 
<head> 
 
<!-- Bootstrap CSS --> \t \t 
 
<link rel="stylesheet" href="CSS/bootstrap.min.css"> 
 
<!-- style CSS--> 
 
<link rel="stylesheet" href="CSS/style.css"> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-xs-12 .col-sm-12 .col-md-12 .col-lg-12 backgrounddiv"> 
 
<div class="col-xs-5 .col-sm-5 .col-md-5 .col-lg-5 LogoDiv"> 
 
</div> 
 
</div> 
 

 
</div> <!-- End of row --> 
 
</div> <!-- End of Container --> 
 
</body> 
 
</html>

来源

2016-08-23 Arpit Gupta

你必须设置.container宽度：

/*css file */ 

body 
{ 
    margin:0; 
    padding:0; 
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    position:relative; 
    overflow-x:hidden; 
} 

* 
{ 
    margin:0; 
    padding:0; 
} 

.container 
{ 
    width: 600px; 
    max-width:100%; 
    border:1px solid rgba(6,0,0,1.00); 
    margin:auto; 
} 

.backgrounddiv 
{ 
    background:url('../images/bg_page_01.png'); 
    background-size:100%; 
    background-repeat:no-repeat; 
    height:800px; 
} 

.LogoDiv 
{ 
    clear:both; 
    position:absolute; 
    background:url('../images/logo_fianl.png'); 
    background-size:100%; 
    background-repeat:no-repeat; 
    height:250px; 
}

演示：https://jsfiddle.net/wr9awq4s/

来源

2016-08-23 12:51:13

请问我可以提供样品代码 –

@ArpitGupta我把它加到我的答案中。 –

你可以试试下面的代码：

Working demo

.LogoDiv 
    { 
    clear:both; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    background:#fff; 
    width:500px; 
    height:250px; 
}

来源

2016-08-23 12:51:37

请建议使用响应式代码，因为在更改设备宽度后，它不能完美呈现。 –

@ArpitGupta它的工作完全正常我猜，不明白为什么你说它不完美渲染。 – kukkuz

margin：0 auto;是不是工作把另一个div的一个div中心

回答

相关问题