如何在另一个div中心div？ [英] How to center div within another div?
本文介绍了如何在另一个div中心div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在学习如何使用相对位置/绝对位置。
I'm learning how to use the position relative/absolute.
但是，我有一些困难。
我试图在div中水平居中一个div，但是当我添加 margin：0 auto; 它什么都不做。
I'm trying to horizontally center a div within a div but when I add margin: 0 auto; it does nothing.
我做了一个小提琴。
或这里的代码：
<!DOCTYPE HTML>
<html lang="en-UK">
<head>
<link href="DivTest.css" rel ="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="header"></div>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
CSS：
body, html {
margin: 0;
width: 100%;
}
#header{
position: relative;
width: 100%;
height: 200px;
background-color: lightgreen;
margin: 0 0 20px 0;
}
#outer{
position: relative;
width: 800px;
height: 500px;
background-color: red;
margin: 0 auto;
}
#inner{
position: absolute;
width: 200px;
height: 250px;
background-color: lightblue;
margin: 0 auto;
}
任何帮助将不胜感激。
推荐答案
只需删除位置：absolute; 属性 #inner
小提琴： http://jsfiddle.net / Q8NVH / 7 /
这篇关于如何在另一个div中心div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
