按钮在 flex 容器中没有正确居中

Question

我正在尝试将垂直高度为 100% 的流体容器中的按钮居中，并为其提供距屏幕底部的偏移量。我几乎在那里，但是，按钮从左侧偏移并且没有正确居中。请参阅我的代码片段中的示例。

我不确定我在这里遗漏了什么...我怎样才能将按钮正确地居中到屏幕中央？

在我的站点代码中，我在主流体容器中有一个图像作为背景，因此我的背景尺寸为：cover；等在我的 css.

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

Answer 1

您应该实施 bootstrap 对齐而不是使用常规 css，尝试 Flex containers。请参阅下面的示例：

<button type="button" class="d-flex justify-content-center btn btn-primary">Primary</div>

添加 d-flex justify-content-center 将水平对齐您的元素。要垂直对齐元素，请查看 Vertical alignment

Answer 2

添加

left: 50%;
transform: translateX(-50%);

以.centered-button元素为中心那个。

this link is complete answer for centering with position

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    position: absolute;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
    left: 50%;
    transform: translateX(-50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

您可以使用 flex 来简单地做到这一点。

.main-div {
    background-color: pink;
    min-height: 100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

Answer 3

.main-div {
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.centered-button {
    vertical-align: middle;
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

Answer 4

/*You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on
along with display: flex; you need these two property also
- align-items:center; ( this aligns button in center vertically )
- justify-content:center; ( this aligns button in center horizontally )

using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device */

.main-div {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color: pink;
    min-height: 100vh;
    line-height:100vh;
    min-width: auto;
    position: relative;
}

.centered-button {
    bottom: 3rem;
    width: 15rem;
    border-radius: 3rem;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
    transition: all 0.3s ease 0s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet"/>
</head>
<body>

    <div class="fluid-container main-div">
        <button type="button" class="btn btn-primary centered-button">Primary</button>
    </div>
    
</body>
</html>

按钮在 flex 容器中没有正确居中

Button not correctly centered in flex container

html

css

bootstrap-4

bootstrap-5