如何获取元素在父级div里的位置_css 如何实现水平居中、垂直居中（超全面）...

最新推荐文章于 2025-09-17 23:02:33 发布

原创最新推荐文章于 2025-09-17 23:02:33 发布 · 758 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#如何获取元素在父级div里的位置

博客介绍了元素分为块级元素和行内元素，块级元素可设宽高，行内元素若要设置宽高可将 display 属性设为 inline - block。还讲解了行内元素水平对齐方法，即给当前元素的父级元素设置 text - align：center。

前言：元素一般分为块级元素和行内元素
块级元素可以设置高度，宽度，行内元素则不能，如果非要给行内元素设置宽高，只需要将 display 属性设置为 inline-block 即可

一.水平对齐：

1.行内元素

· 给当前元素的父级元素设置 text-align：center

代码：

.box{text-align: center;/* 此处父元素没有宽度和高度               宽度默认为浏览器的可视宽度               高度默认为0， 此处是 p标签内容 撑出来的高度 */}.text{}

class="box"><p class="text">我是一段文字p></div>

展示：

`2.块级元素`

· 该块级元素有固定的宽度，给该元素设置 margin : 0 auto

代码

.box{width: 200px;margin: 0 auto;/* 此处的 0 可以为任意的尺寸 */background-color: red;/* 为了方便大家看该元素的位置，此处加了背景颜色 */}

class="box">我是块级元素

展示：

拓展：如果需要多个块级元素居中对齐呢？

`方法一：`

代码：

.box{margin: 0 auto;width: 325px;}.box_one{background-color: red;}.box_two{background-color: blue;}.box_three{background-color: greenyellow;}.box_one,.box_two,.box_three{display: inline-block;}<body><div class="box"><div class="box_one">我是块级元素1div><div class="box_two">我是块级元素2div><div class="box_three">我是块级元素3div>div>body>

展示：

`方法二(flex 布局)：`

还不了解flex布局的朋友可以看看这篇：flex布局看这一篇就够了

代码：

.box{display: flex;flex-direction: row;justify-content: center;}.box_one{background-color: red;}.box_two{background-color: blue;}.box_three{background-color: greenyellow;}.box_one,.box_two,.box_three{}<body><div class="box"><div class="box_one">我是块级元素1div><div class="box_two">我是块级元素2div><div class="box_three">我是块级元素3div>div>body>

展示：

`二.垂直居中：`

为了方便演示，此处的垂直居中，均在 div 盒模型中演示

`1-1.行内元素(单行)`

·line-height 属性设置的高度和父元素的高度相同即可

`代码：`

*{padding: 0;margin: 0;}.box{background-color: red;width: 10vw;height: 100px;}p{color: white;line-height: 100px;}

"box">

我是一行文字

`展示：`

`1-2.行内元素(多行)`

此处推荐使用flex布局

代码：

*{padding: 0;margin: 0;}.box{background-color: black;width: 10vw;height: 100px;display: flex;flex-direction:column;justify-content: center;}p{color: white;}<body><div class="box"><p>我是一行文字p><p>我是一行文字p><p>我是一行文字p>div>body>

展示：

`2-1.块级元素(单个)`

要不要尝试一下使用定位属性实现呢

代码：

.box{background-color: black;width: 300px;height: 300px;position: relative;}.box_son{width: 50px;height: 50px;background-color: white;position: absolute;top: 50%;transform: translateY(-50%);}

"box">

"box_son">

展示：

`2-2.块级元素(多个)`

如果有多个块级元素呢？那我还是推荐 flex布局哈，大家都可以试试，我这个就不浪费大家时间了，下面来总结一下，在现实生活中，其实水平居中和垂直居中是相辅相成的，下面给大家使用flex布局给大家展示一下

`3.综合展示`

`3-1.块级`

.box{background-color: black;width: 300px;height: 300px;display: flex;align-items: center;justify-content: center;}.box_son{width: 50px;height: 50px;background-color: white;}

"box">

"box_son">