求教怎么设置margin属性，可以使元素的位置居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求教怎么设置margin属性，可以使元素的位置居中相关的知识，希望对你有一定的参考价值。
难道要一点一点的调。有时候aligh="center"并不管用，而有些元素又没有aligh属性。这怎么办？
①水平居中：文字：text-align:center;
容器：父级设置text-align:center;
容器本身设置：margin:0 auto;
②垂直居中：
文字：vertical-align:middle;或vertical-align:50%;
容器：
方法1： 父级定位position:relative
容器定位postion:absolute 左上角下移top:50% 上移margin-top:一半高
方法2： 父级display:table-cell与vertival-align:middle
容器margin:auto与vertical-align:middle
【方法2的display:table-cell在IE6中有bug，可以给父级设置个宽或高解决。】 参考技术A 先编写一个div，然后一定要固定宽度。代码如下：
<div class="bc">居中</div>
<style type="text/css">
.bc
width:200px;
height:200px;
margin:0 auto;
background-color:yellow;
</style>
将这段代码复制至html中，一定能成。 参考技术B 给元素一个width值，再设置margin:0 auto,这样就居中了 参考技术C margin;0 auto;
利用负margin实现元素居中
原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心.
负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素;
负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素;
例如:
<!DOCTYPE html>
<htm>
<head>
<title></title>
<style type="text/css">
#father
{
position:relative;
width:200px;
height:160px;
border:1px dashed gray;
}
#son
{
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-50px;
width:100px;
height:60px;
background-color:Red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
在这个例子中,先利用position定位使#son的左上角位于#father的中心,再设置#son的margin-top,margin-left为其自身height/width的一般的负值,这样就轻松将其中心移至父元素中心.
以上是关于求教怎么设置margin属性，可以使元素的位置居中的主要内容，如果未能解决你的问题，请参考以下文章