css 元素垂直居中方法

Sam young

于 2022-11-02 15:22:30 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

分类专栏：知识点文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/young_sam/article/details/127652312

知识点专栏收录该内容

29 篇文章

订阅专栏

本文介绍了两种实现元素在父容器内水平垂直居中的方法：flex布局和position定位。通过简单的HTML结构配合CSS样式，可以轻松地使子元素在父容器内居中显示。

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

1. flex布局方法

<div class="father">
	<div class="child"> </div>
</div>

<style>
 .father {
  display: flex;
  justify-content: center;
  align-items: center;
 }
</style>

2. position 方法

<div class="father">
	<div class="child"> </div>
</div>

<style>
 .father {
	position: relative;
 }

 .child {
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>