实现居中的三种方式（react行内样式写的）

最新推荐文章于 2025-04-27 13:41:03 发布

原创最新推荐文章于 2025-04-27 13:41:03 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #vue.js

学习成长专栏收录该内容

8 篇文章

订阅专栏

本文介绍了三种方法来实现网页元素的居中显示：1) 使用Flex布局，通过`justifyContent`和`alignItems`属性实现水平和垂直居中；2) 利用定位，通过父元素相对定位和子元素绝对定位配合`top`, `left`, `margin`调整；3) 使用CSS3的`transform`属性的`translate`进行偏移居中。这三种方法都是前端开发中常用的布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 flex

justifyContent: 'center', // 控制水平居中

alignItems: 'center' // 控制垂直居中

<div style={{ background: 'pink', width: '400px', height: '400px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <div style={{ background: 'white', width: '50px', height: '50px' }}>
        1111
    </div>
</div>

2、定位（父元素相对定位，子元素绝对定位）

 <div style={{ background: 'pink', width: '400px', height: '400px', position: 'relative' }}>
   <div style={{ background: 'white', width: '50px', height: '50px', position: 'absolute', top: '50%', left: '50%', marginLeft: '-25px', marginTop: '-25px' }}>
      1111
   </div>
 </div>

3、css3的transform

 <div style={{ background: 'pink', width: '400px', height: '400px', position: 'relative' }}>
   <div style={{ background: 'white', width: '50px', height: '50px', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)'  }}>
      1111
   </div>
 </div>