【CSS】样式水平垂直居中

行内元素:

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center

html 复制代码
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

div是文本元素的父元素

因此我们对div元素设置 text-align:center

html 复制代码
<style>
.txtCenter{
text-align:center;
}
</style>

定宽块状元素

通过设置"左右margin"值为"auto"来实现居中的。

不定宽高实现盒子水平垂直居中 --面试常考题

通过定位+translate

css 复制代码
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}

.box1 {
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

left: 50%

  • 这个属性是相对定位父元素的左边距离的百分比。在绝对定位的元素中,left: 50% 表示元素的左边缘位于父元素宽度的50%处。这会使元素的左边缘与父元素的中心对齐。

transform: translateX(-50%)

  • transform 属性是 CSS3 中的属性,可以对元素进行旋转、缩放、倾斜或平移等变换。
  • translateX(-50%) 表示沿着 X 轴平移元素的位置。在这种情况下,50% 的意思是将元素向左平移自身宽度的50%,因此实际上是将元素的中心点与父元素的中心点对齐,从而实现水平居中的效果。

综合起来,left: 50% 将元素的左边缘置于父元素的中心,而 transform: translateX(-50%) 将元素以自身宽度的一半向左平移,使元素的中心与父元素的中心对齐,从而实现水平居中的效果。同理,垂直居中。

相关推荐
软件小伟4 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾25 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧34 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm43 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter