20230822-实现两盒子垂直水平居中定位方式-CFANZ编程社区

20230822-实现两盒子垂直水平居中定位方式

24/100

保存草稿发布文章

20230822-实现两盒子垂直水平居中定位方式_html

代码块

资源绑定

new

模版

# 代码部分
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
    <title>歌谣居中测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            width: 500px;
            height: 600px;
            background-color: pink;
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -100px;
            width: 200px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>
```
# 实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/dd785a2182444333909af753a6d8cc0b.png)

代码部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌谣居中测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            width: 500px;
            height: 600px;
            background-color: pink;
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -100px;
            width: 200px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

实现效果

20230822-实现两盒子垂直水平居中定位方式_导入导出_02

语法说明

标题

文本样式

列表

图片

链接

代码片

表格

注脚

注释

自定义列表

LaTeX 数学公式

插入甘特图

插入UML图

插入Mermaid流程图

插入Flowchart流程图

插入类图

快捷键

标题复制

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

代码部分

实现效果

Markdown 已选中 550 字数 46 行数当前行 46, 当前列 0

HTML 464 字数 37 段落

采集

0 条评论