Question

我有一个父div和一个子div。我想知道我是否可以将孩子的宽度和高度表示为父母的百分比，例如

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>

要查看行动http://jsfiddle.net/thiswolf/3qRgH/

外部div（父级）有一个height of 100px，我的子div有一个height of 40px。我想把我的孩子放在父主题中，所以100px - 40px = 60px和我分开60px两次并分配子div [{1}}和margin-top:30px。但我想以百分比形式表示边距。我如何以％表示边距。

Answer 1

您可以通过这种方式居中（编辑）：

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>

请参阅http://jsfiddle.net/3qRgH/2/

这是你要问的吗？

Answer 2

http://jsfiddle.net/thiswolf/5AZJD/

这似乎有效，但我还没有证明这一点

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>

基于父div将子div居中

2 个答案: