如何使一个盒子水平垂直居中(常用的)

目录

1. 使用Flex布局

 2. 使用Grid布局

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

 4.绝对定位+外边距 auto 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)


1. 使用Flex布局

如何实现:

在父元素上添加:

            display: flex;

            align-items: center;

            justify-content: center;

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: flex;
            /* 水平居中 */
            justify-content: center; 
            /* 垂直居中 */
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
 </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 2. 使用Grid布局

 如何实现:

在父元素上添加:

        display: grid;

        place-items: center;

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: grid;
            /* 水平和垂直方向都居中对齐 */
            place-items: center;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

相对父级上边和左边,或者下边和右边各移动50%,同时通过外边距减去自身的宽高各一半的大小。

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -100px;  //子元素高度的一半

            margin-left: -100px;  //子元素宽度的一半

 

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;//子元素高度的一半
            margin-left: -100px;//子元素宽度的一半
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 4.绝对定位+外边距 auto 

将盒子的上下左右定位全部设置为0,同时设置外边距自适应

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 

 

相关推荐

  1. 如何使一个盒子水平垂直居中常用

    2024-07-09 17:26:05       7 阅读
  2. 如何一个元素水平垂直居中

    2024-07-09 17:26:05       27 阅读
  3. CSS水平垂直居中

    2024-07-09 17:26:05       41 阅读
  4. CSS中水平垂直居中元素多种方式

    2024-07-09 17:26:05       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 17:26:05       3 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 17:26:05       3 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 17:26:05       2 阅读
  4. Python语言-面向对象

    2024-07-09 17:26:05       2 阅读

热门阅读

  1. mybatis用注解替换xml,不再写.xml了

    2024-07-09 17:26:05       11 阅读
  2. 拓扑学习系列(9)计算代数拓扑中的复形COMPLEXES

    2024-07-09 17:26:05       12 阅读
  3. Docker

    Docker

    2024-07-09 17:26:05      9 阅读
  4. 服务器安装多个Tomcat

    2024-07-09 17:26:05       9 阅读
  5. 玩转springboot之springboot定制化tomcat

    2024-07-09 17:26:05       12 阅读
  6. Word使用中的一些烦人的小问题

    2024-07-09 17:26:05       10 阅读
  7. Redis 中的跳跃表是什么

    2024-07-09 17:26:05       10 阅读
  8. 大语言模型系列-Transformer介绍

    2024-07-09 17:26:05       7 阅读
  9. FCA-FineReport认证试题及答案

    2024-07-09 17:26:05       12 阅读