Question

我认为这是一个愚蠢的错误，但我不明白。

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  <div><img src="https://via.placeholder.com/150x150" alt=""></div>
</div>

但是我的图像没有居中。

我在MDN上查看，图像居中

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

我的页面：

Answer 1

我认为增加身高可以解决您的问题。

.box {
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}

Answer 2

如果这就是您的全部代码，则您忘记了CSS：

    DECLARE @json NVARCHAR(MAX);

    SET @json = N'
    {
        "data": {
            "deviceTransactions": [{
                "transactionId": "3f147089-ff52-5552-a29b-cd32a7e2ba97",
                "organizationId": "9023179c-7888-4c5e-a831-28259b8a8872",
                "device": "JTLSPERF1",
                "event": "PUSH",
                "siteName": "TEST-SITE",
                "siteId": "5555f068-3ed2-4f83-b084-666f4f92734",
                "createdTime": "Sat, 18 Aug 2018 13:51:57 GMT",
                "updatedTime": "Sat, 18 Aug 2018 13:53:07 GMT",
                "userName": "test1",
                "userId": "test1",
                "status": "Failed",
                "details": {
                    "count": 251,
                    "deviceId": "44343570-7eb5-11e8-8160-057818f1057b",
                    "error": {
                        "errorMessage": "Failed to start polling status of the Queue",
                        "stage": "MANAGE_PUSH",
                        "errorCode": "ERR021001"
                    },
                    "jcigId": "4rtr5aa6a2-71b5-455f-8890-7e2aa398b757"
                },
                "cancelledBy": ""
            }],
            "libraryTransactions": []
        },
        "success": true,
        "statusCode": 200
    }
    ';

    --This will get you just the transactionId
    SELECT *
    FROM   OPENJSON(@json, '$.data.deviceTransactions')
               WITH (
                        [transactionId] NVARCHAR(200) '$.transactionId')

    --This gets you all the columns                 
    SELECT *
    FROM   OPENJSON(@json, '$.data.deviceTransactions')
               WITH (
                        [transactionId] NVARCHAR(200) '$.transactionId'
                      , [organizationId] NVARCHAR(200) '$.organizationId'
                      , [device] NVARCHAR(200) '$.device'
                      , [event] NVARCHAR(200) '$.event'
                      , [siteName] NVARCHAR(200) '$.siteName'
                      , [createdTime] NVARCHAR(200) '$.createdTime'
                      , [updatedTime] NVARCHAR(200) '$.updatedTime'
                      , [userName] NVARCHAR(200) '$.userName'
                      , [userId] NVARCHAR(200) '$.userId'
                      , [status] NVARCHAR(200) '$.status'
                      , [count] NVARCHAR(200) '$.details.count'
                      , [deviceId] NVARCHAR(200) '$.details.deviceId'
                      , [errorMessage] NVARCHAR(MAX) '$.details.error.errorMessage'
                      , [errorStage] NVARCHAR(200) '$.details.error.stage'
                      , [errorCode] NVARCHAR(200) '$.details.error.errorCode'
                      , [jcigId] NVARCHAR(200) '$.details.jcigId'
                      , [cancelledBy] NVARCHAR(200) '$.cancelledBy'
                    )

此外，尝试按照其他人的建议增加最大垂直高度。

.box div {
  width: 100px;
  height: 100px;
}

flexbox中垂直中心的问题

2 个答案: