div元素水平垂直都居中的办法

什么是元素

HTML文档由元素构成，元素由开始标签、结束标签、属性及元素的内容4部分组成。
标签是为一个元素的开始和结束做标记，网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。
举个例子：

=============这是标签

这是一个句子

=======这是元素# ---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

学习笔记罢了

提示：以下是本篇文章正文内容，下面案例可供参考

一、元素是什么？

HTML文档由元素构成，元素由开始标签、结束标签、属性及元素的内容4部分组成。
标签是为一个元素的开始和结束做标记，网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。
举个例子：

=============这是标签

这是一个句子

=======这是元素#

二、使其居中的方法

先做个父子盒子：代码如下

加个css属性使其在浏览器上表现出来

在这里插入代码片
 .big{
         height: 1000px;
         width: 100%;
         background-color: aquamarine;
         

     } 
     .small{
    height: 500px;
         width:1000px;
         background-color: pink;
         
       ![在这里插入图片描述](https://img-blog.csdnimg.cn/25b11993a3414817b685e57737c9f8b7.png#pic_center)

}
![在这里插入图片描述](https://img-blog.csdnimg.cn/96f3d3bfabf14569bc0c9f3b0c99a00a.png#pic_center)

1.基于盒模型的居中（需要解决magin-top 塌陷）

方法一***使用magin给父元素加边框

1
给父元素设置边框 给子元素设置margin 上下左右为宽高的一半

父元素：
border:1px solid red;
子元素：
margin：width/2;
方法二：*****使用怪异盒模型和padding
父元素设置padding：50px;和怪异盒模型

padding:50px;
box-sizing:border-box;
然后此时你再把东西写进去就被固定在你想要的边距上了

2.定位(子绝父相)

方案一：`（较常用）
父元素设置相对定位 子元素设置绝对定位(父相子绝)
父元素：
position：relative；

子元素：
position：absolute；
margin：auto；
top：0；
right：0；
bottom：0；
left：0；
`

方案二：对子元素先使她左和上先用边偏距走50%
父元素设置：
position：relative；

子元素设置
top=50%;
left=50%；
position：absolute；

第一步：此时粉色儿子移到边了
第二部：使粉色儿子回退：（利用margin)
margin-left: -250px;
margin-top: -250px;

完整代码