传统定位和flex定位
16lz
2021-03-25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素居中的两种方法</title>
<style>
.box {
width: 15em;
height: 15em;
background-color: crimson;
position: relative;
}
.box .sun {
width: 5em;
height: 5em;
background-color: darkblue;
position: absolute; /**绝对定位*/
top: 0;
left: 0;
right: 0;
bottom: 0; /**top left right bottom 等于0让盒子居中*/
margin: auto; /*这一行才做了sun 元素再box中的居中效果,没有的话无效果*/
}
.box1 {
width: 15em;
height: 15em;
background-color: darkorange;
display: flex;
justify-content: center;
align-items: center;
/** display: flex;justify-content: center; align-items: center; 完成了利用flex居中效果*/
}
.box1 .sun1 {
width: 5em;
height: 5em;
background-color: darkslateblue;
}
</style>
</head>
<body>
<h2>传统居中</h2>
<div class="box">
<div class="sun"></div>
</div>
<h2>flex居中</h2>
<div class="box1">
<div class="sun1"></div>
</div>
</body>
</html>
更多相关文章
- IDEA激活码2020 最新激活码2021.3.2 永久更新 亲测有效
- box-sizing功能。相对定位与绝对定位。绝对定位:块级居中。
- 0323作业
- 0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中
- 定位属性position 的介绍
- 商品详情平面设计,图片文字的镜像处理
- web前端编程语言有哪些?
- 用函数公式制作旋风图,75.42%的人没想到!
- 机器学习开篇小菜