中间盒子自适应居中常用的几种方式(代码实例)
程序员文章站
2022-06-26 11:42:47
中间盒子自适应居中常用的几种方式(代码实例)
中间盒子自适应居中常用的几种方式(代码实例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.父元素加相对定位,子元素且对定位*/
#parent{
width: 500px;
height: 500px;
background-color: #f00;
/*父元素加相对定位*/
position:relative;
}
#child{
width: 200px;
height: 200px;
background-color: #0f0;
/*子元素加绝对定位,向下左右0*/
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
/*2.父元素加display: table-cell;vertical-align: middle;text-align: center; 子元素加:display: inline-block;*/
/*3.如果知道子元素宽高,父元素加:position: relative;子元素加: position: absolute; top:50%;left:50%;margin-top:-100px;margin-left:-100px;*/
</style>
</head>
<body>
<pid="parent">
<pid="child"></p>
</p>
</body>
</html> 上一篇： 记一次ReactNative踩坑