关于照片（img）的水平居中和垂直居中-蒲公英云

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

短命女 2023-10-02 18:17 69阅读 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; */
        }