CSS样式——div居中方法

比眉伴天荒 2022-12-17 01:26 174阅读 0赞

## 1、绝对居中 ##

给div设置样式，div默认显示位置为body的左上方。

width: 400px;
                height: 300px;
                background-color: orange;

如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]  
首先给div添加绝对定位，并设置上下左右边距为0，然后使用`margin: auto;`自动居中。

position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;

结果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]

## 2、水平垂直居中 ##

给其**父元素**添加`display: flex;`弹性布局。  
内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。

display: flex;
                justify-content: center;
                align-items: center;

结果显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 2]  
如果注释掉`align-items: center;`属性，元素则按照当前主轴X轴居中，由于给元素开启弹性布局，故主轴应为X轴，可设置两个div验证。

display: flex;
                justify-content: center;
                /*align-items: center;*/

显示结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 3]

如果注释掉justify-content属性，使用`align-items: center;`属性，则居中对齐弹性盒的各项 `<div>` 元素，默认是沿着副轴Y轴居中，（上文提到过：由于给元素开启弹性布局，故主轴应为X轴）。

display: flex;
                /*justify-content: center;*/
                align-items: center;

显示结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 4]

## 3、（定位+变形）居中 ##

给父元素添加 `position: relative;`相对定位。

给自身元素添加`position: absolute;`绝对定位。

`top: 50%;`使自身元素距离上方“父元素的50%高度”的高度。

`left: 50%;`使自身元素距离上方“父元素的50%宽度”的宽度。

`transform: translate(-50%,-50%);`使自身元素再往左，往上平移自身元素的50%宽度和高度。

position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%,-50%);

显示结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0f4e193dc4924cfc8d281263309d7020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f647d28925cc4a80b7e2dd9bc4e107b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/0a74cd562e784b36b5cb4f3900186172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/61afcf07e9a44ec789ce3f646cdccc9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/5dae0fa9ee8b4d6788fab3495a95341d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/f2742bfc525f4a75b3d245f27c8534e2.png