html中块底部居中代码

在HTML中,我们常常需要让块元素居中对齐,但并不是所有的元素都可以像文字一样使用text-align属性来实现。接下来我们介绍一种实现块底部居中的代码

.block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* translateX的值为自身宽度的一半 */
  bottom: 0;
  /* 关键代码,将块元素的底部对齐 */
}

html中块底部居中代码

这里我们使用了绝对定位的方式,通过left属性将盒子居中。但是,left属性的值表示的是盒子左侧到其包含块左侧的距离,因此需要使用transform属性来将块元素向左移动自身宽度的一半。

最后,我们使用bottom属性将盒子的底部对齐,达到块底部居中的效果

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些