关于照片（img）的水平居中和垂直居中

短命女 2023-10-02 18:17 16阅读 0赞

**本文主要是讲述照片（img）的水平居中和垂直居中，但是其他元素的水平居中和垂直居中也可借鉴此文。**

#### 水平居中： ####

**1.将img元素设置成块级元素**

img {
                display: block;
                margin: 0 auto;
            }

**2.flex布局**

.box1 {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                display: flex;
                justify-content: center;
            }

**3.父元素设置text-align：center**

.box1 {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                text-align: center;
            }

**4.定位**

img {
                width: 50px;
                height: 50px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

#### 垂直居中： ####

**1.flex布局**

.box1 {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                display: flex;
                align-items: center;    /* 对单行弹性盒子模型使用可以使用 */
                /* align-content: center;  通常使用该属性设置垂直居中，但是该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap ,或者盒子中本来就只有一个元素）。*/
            }

tip:CSS align-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

**2.display：table-cell**

.box1 {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                display: table-cell;
                vertical-align: middle;
            }

**3.定位**

img {
                width: 50px;
                height: 50px;
                position: relative;
                top: 50%;
                transform: translateY(-50%);
            }

tip：通过设置line-height等于父元素高度可以使单行文字实现垂直居中。

代码样例（example）:

CSS：

.container {
                width: 400px;
                height: 800px;
                background-color: aliceblue;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
            }
            
            .box1 {
                width: 200px;
                height: 200px;
                background-color: aquamarine;
                /* display: flex;
                align-items: center; */
                /* 对单行弹性盒子模型使用可以使用 */
                /* align-content: center;  通常使用该属性设置垂直居中，但是该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。*/
            }
            
            .box1 img {
                width: 100px;
                height: 100px;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                /* display: block;
                margin: 0,auto; */
            }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e6b3650c67894dcf9c31f779474e15d5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAR2F2aeabpg==,size_20,color_FFFFFF,t_70,g_se,x_16