将1个肯定精准定位的div水平竖直垂直居中对齐

日期:2021-03-08 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

在一般状况下,能够为元素加上margin:0px auto便可让元素在它的父元素水平垂直居中,随后再将它设定为竖直垂直居中对齐便可。可是为肯定精准定位的目标加上margin:0px auto其实不能起效,因此说還是要用老方法完成。

编码示比如下:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf⑻">
<title>蚂蚁部落</title>
<style type="text/css">
.father
{
width:600px;
height: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下几个关键点:
1.父元素是应用相对性精准定位,这模样元素便可以以它做为位移参照目标。
2.top特性值测算方法:父元素的高宽比/2-子元素高宽比/2,left特性值测算方法:父元素宽度值/2-子元素宽度值/2。

上一篇:单独站开实体店新闻资讯 返回下一篇:没有了