2021-06-15 CSS盒子模型居中的几种方法

方法一：position配合margin属性1

①给需要居中的盒子添加margin: auto;（只能水平居中）
②给父元素相对定位，给子元素绝对定位，上下左右位置都设置为0，然后添加margin: auto;

示例代码：

	<style>
        #father{
            background: #ccc;
            width: 1000px;
            height: 600px;
            position: relative;
        }
        #son{
            background: pink;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;   
        }
    </style> 

方法二:position配合margin属性2

父元素：设置相对定位

position: relative; //父元素相对定位

子元素：设置绝对定位调整位置

position: absolute; //子元素绝对定位
top: 50%;
left: 50%;
margin-left: 取宽度的负一半;
margin-top: 取高度的负一半；

示例代码：

	<style>
        #father{
            background: #ccc;
            width: 1000px;
            height: 600px;
            position: relative;
        }
        #son{
            background: pink;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
    </style>

方法三：display: flex

给父元素添加如下代码

display: flex;
justify-content: center; //水平
align-items: center; //垂直

方法四：display: table-cell配合 margin属性

父元素 display: table-cell; vertical-align: middle; //垂直
子元素 margin: auto; //水平

示例代码：

<style>
        #father{
            width: 1000px;
            height: 600px;
            display: table-cell;
            vertical-align: middle;
            background: #ccc;
        }
        #son{
            width: 200px;
            height: 200px;
            margin: auto;
            background: pink;
        }
    </style>

方法五:

父元素：

position: relative; //父元素相对定位

子元素：设置绝对定位调整位置，添加tranform属性

position: absolute; //子元素绝对定位
top: 50%;
left: 50%;
transform: translate( -50%,-50%);

示例代码：

	<style>
        #father{
            background: #ccc;
            width: 1000px;
            height: 600px;
            position: relative;
        }
        #son{
            background: pink;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%,-50%);
        }
    </style>