CSS垂直居中：使用弹性盒子实现垂直居中

Aadmin(〜￣▽￣)〜

已于 2023-02-11 17:13:10 修改

阅读量461

点赞数

分类专栏： CSS垂直居中文章标签： html5 css Powered by 金山文档

于 2023-02-11 17:09:36 首次发布

本文链接：https://blog.csdn.net/m0_50465418/article/details/128985263

版权

CSS垂直居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个块级元素

创建一个块级元素，作为弹性布局。

在body中添加一个div块级元素，并赋予class值为flex-container。添加div块级元素如下图

<div class="flex-container">
</div>

添加子元素

添加子元素，用于完成后演示。

往class值为flex-container的div块级元素中添加元素。添加完元素如下图

<div class="flex-container">
    <p>hello</p>
</div>

设置CSS样式

最后添加一下CSS样式即可！

<style>
  .flex-container{
      width: 100%;
      height: 100%;
      border-width: 0;
      margin: 0;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  *{
      margin: 0;
      padding: 0;
  }
</style>

页面完整代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8"/>
    <title>屏幕居中</title>
    <style>
        .flex-container{
            width: 100%;
            height: 100%;
            border-width: 0;
            margin: 0;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <p>hello</p>
    </div>
</body>