好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

将一个绝对定位的div水平垂直居中对齐

在通常情况下,可以为元素添加m arg in:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直 居中对齐 即可。但是为绝对定位的对象添加mar gin :0px auto并不能 生效 ,所以说还是要用老办法实现。

代码示例如下:

复制代码

代码如下:


<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset=" utf-8">
<t IT le>蚂蚁部落</title>
<style type="text/css">
.father
{
width:600px;
h ei ght:600px;
background-color:green;
margin:0px auto;
position:relative;
}
.children
{
position:absolute;
width:200px;
height:200px;
left:200px;
top:200px;
background-color: red ;
}
</style>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
</body>
</html>

以上代码可以将子div在父div中水平垂直居中对齐,下面就 简单 介绍一下几个要点:
1.父元素是使用相对定位,这样子元素就可以以它作为位移参考对象。
2.top属性值计算方式:父元素的高度/2-子元素高度/2,left属性值计算方式:父元素 宽 度值/2-子元素宽度值/2。

总结

以上是 为你收集整理的 将一个绝对定位的div水平垂直居中对齐 全部内容,希望文章能够帮你解决 将一个绝对定位的div水平垂直居中对齐 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于将一个绝对定位的div水平垂直居中对齐的详细内容...

  阅读:18次