|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-4-26 07:41 编辑
设有两个父子元素,现要求令子元素在父元素内水平、垂直两个方向都能居中,怎么实现?
方法一:使用Flex弹性布局的justify-content和align-items属性
<style type="text/css">
.out-box1 {
width: 150px;
height: 150px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
border: 1px solid;
}
.inner-box1 {
width: 100px;
height: 100px;
background: #333;
}
</style>
<div class="out-box1">
<div class="inner-box1"></div>
</div>
此法,父子元素无position定位也不影响子元素居中。
方法二:父元素设display为inline-block并设定padding值
.out-box2 {
display: inline-block;
padding: 25px;
border: 1px solid;
}
.inner-box2 {
width: 100px;
height: 100px;
background: olive;
}
<div class="out-box2">
<div class="inner-box2"></div>
</div>
此法不设置父元素宽高,其宽高将由自己的padding + 子元素的宽高决定。此法可变通,如设置子元素的margin值也能达到目的。
方法三:子元素margin auto + 上下左右0
.out-box3 {
position: relative;
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box3 {
position: absolute;
width: 100px;
height: 100px;
margin: auto;
left:0;
top: 0;
right: 0;
bottom: 0;
background: olive;
}
此法,要求父元素position设为 relative、子元素absolute,子元素的left、top、right、bottom都设为0,并将margin设为auto即可。
方法四:用transform之translate腾挪大法
.out-box4 {
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box4 {
width: 100px;
height: 100px;
transform: translate(25px,25px);
background: olive;
}
<div class="out-box4">
<div class="inner-box4">4</div>
</div>
此法代码量极少,重点在于根据父子元素的尺寸计算偏移量。例中,父元素宽高均大于子元素50个像素,按初始位置,子元素左边、上边与父元素左边、上边相切,xy两个方向各挪动25像素便可居中。计算公式为(以宽度为例):(父元素宽度-子元素宽度)/2
方法五:定位大法
.out-box5 {
width: 150px;
height: 150px;
border: 1px solid;
}
.inner-box5 {
position: relative;
width: 100px;
height: 100px;
left: 25px;
top: 25px;
background: olive;
}
<div class="out-box5">
<div class="inner-box5">5</div>
</div>
此法至少要求子元素拥有position属性,如果父元素没有position属性设置,则子元素的position值只能是relative,若父元素有position设定,则子元素设position为relative或absolute均可。建议父子元素都有relative或absolute定位。
方法五的左右(left和top)的计算方法同方法四。当存在某一盒子尺寸可能不能确定时,可考虑使用CSS的calc函数实现动态定位。例如,假设我们不知道父元素的宽高,则:
left: calc(50% - 25px);
top: calc(50% - 25px);
扩展知识:
① 【line-height】当一个元素设定了 line-height 值与 width 值相等,则针对单行文本,文本垂直居中;
② 【text-align: center】文本整体水平居中
③ 【display: table-cell】赋予元素表格属性,元素拥有表格的一些特性
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|