方法一:常见的居中方法,定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*常见的居中:定位方法*/
.father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.child{
width:100px;
height: 100px;
background-color:blue;
position: absolute;
/*
* top bottom 为 0垂直居中
* left right 为0 则水平居中
*/
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- div 的几种居中方法 -->
<div style="width:200px;text-align: center; ">方法一:</div>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
}
方法二:负边距居中法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*负边距居中*/
.father2{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.child2{
width: 100px;
height: 100px;
background-color:blue;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<!-- div 的几种居中方法 -->
<div style="width:200px;text-align: center;">方法二:</div>
<div class="father2">
<div class="child2"></div>
</div>
</body>
</html>
方法三:弹性布局居中(未知宽高也可以)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*弹性布局居中(未知宽高也可以)*/
.father3{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.child3{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!-- div 的几种居中方法 -->
<div style="width:200px;text-align: center;">方法三:</div>
<div class="father3">
<div class="child3"></div>
</div>
</body>
</html>
因篇幅问题不能全部显示,请点此查看更多更全内容
怀疑对方AI换脸可以让对方摁鼻子 真人摁下去鼻子会变形
女子野生动物园下车狼悄悄靠近 后车司机按喇叭提醒
睡前玩8分钟手机身体兴奋1小时 还可能让你“变丑”
惊蛰为啥吃梨?倒春寒来不来就看惊蛰
男子高速犯困开智能驾驶出事故 60万刚买的奔驰严重损毁