Question

我正在尝试将登录框设置在屏幕中心但是由于position: absolute，背景颜色变为白色。

/* all */

.patua_font {
    font-family: 'Patua One', cursive;
}

.Roboto_font {
    font-family: 'Roboto', sans-serif;
}


/* login css */

.cus_body {
    height: 100%;
    background: linear-gradient(to right, #31E89F, #00aff4); /*this has no effect after setting position absolute in box*/
}

.btn-primary.custom-btn {
    background-color: #00bcd4;
    border-color: #31E89F;
    width: 100%;
}

.center1 {
    text-align: center;
}

.cus_loginpad {
    padding: 4% 7%;
}

.box {
    background-color: #FAFAFA;
    width: 40%;
    min-width: 390px;
    height: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 45%;
    padding: 20px 20px;
    position: absolute;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    margin: 10px;
}

.box input {
    width: 100%;
    margin: 4px 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>sample</title>
    <link href="https://fonts.googleapis.com/css2?family=Patua+One&family=Roboto&display=swap" rel="stylesheet">
    <link href="mainstyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</head>

<body class="cus_body patua_font">
    <div class="container">
        <div class="box ">
            <div class="cus_loginpad ">
                <h2 class="center1"><img src="images/sample.png" width="150" /></h2>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Password</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
                </div>
                <button type="submit" class="btn btn-primary custom-btn"> Login </button>
            </div>
        </div>
    </div>
</body>

</html>

我如何设置背景：线性渐变（向右，＃31E89F，＃00aff4）；谢谢。

Answer 1

为此使用display: flex。您也可以使用display: grid，但老实说，我仍然更喜欢flexbox，因为我必须支持IE。如果不必支持IE，请使用网格布局。

这里有一个很好的概述，介绍如何center any element水平或垂直或两者同时使用

这是一个有关如何使框居中的示例，我在这里扩展了.container类，但是如果您不希望所有内容都集中在您的所有框上，您还可以添加另一个类来仅使该登录框居中页面。

/* all */

.patua_font {
    font-family: 'Patua One', cursive;
}

.Roboto_font {
    font-family: 'Roboto', sans-serif;
}


/* login css */

.cus_body {
    height: 100%;
    background: linear-gradient(to right, #31E89F, #00aff4); /*this has no effect after setting position absolute in box*/
}

.btn-primary.custom-btn {
    background-color: #00bcd4;
    border-color: #31E89F;
    width: 100%;
}

.center1 {
    text-align: center;
}

.cus_loginpad {
    padding: 4% 7%;
}

.box {
    background-color: #FAFAFA;
    width: 40%;
    min-width: 390px;
    height: auto;
    left: 50%;
    top: 45%;
    padding: 20px 20px;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    margin: 10px;
}

.box input {
    width: 100%;
    margin: 4px 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
}

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>sample</title>
    <link href="https://fonts.googleapis.com/css2?family=Patua+One&family=Roboto&display=swap" rel="stylesheet">
    <link href="mainstyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</head>

<body class="cus_body patua_font">
    <div class="container">
        <div class="box ">
            <div class="cus_loginpad ">
                <h2 class="center1"><img src="images/sample.png" width="150" /></h2>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Password</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
                </div>
                <button type="submit" class="btn btn-primary custom-btn"> Login </button>
            </div>
        </div>
    </div>
</body>

</html>

Answer 2

通过制作.container{display: flex; height:100vh;}-您只需将.box{margin: auto;}提供给框，它就会在垂直和水平方向居中。

最好在全屏模式下查看以下代码段以查看魔术内容：）

/* all */

.patua_font {
    font-family: 'Patua One', cursive;
}

.Roboto_font {
    font-family: 'Roboto', sans-serif;
}


/* login css - note I added the container stlying below */
.container {
  display: flex; 
  height: 100vh
}

.cus_body {
    height: 100%;
    background: linear-gradient(to right, #31E89F, #00aff4); /*this has no effect after setting position absolute in box*/
}

.btn-primary.custom-btn {
    background-color: #00bcd4;
    border-color: #31E89F;
    width: 100%;
}

.center1 {
    text-align: center;
}

.cus_loginpad {
    padding: 4% 7%;
}

.box {
    background-color: #FAFAFA;
    width: 40%;
    min-width: 390px;
    height: auto;
    padding: 20px 20px;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    margin:auto; /* note that I added this*/
}

.box input {
    width: 100%;
    margin: 4px 0;
    padding: 10px;
    outline: none;
    border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>sample</title>
    <link href="https://fonts.googleapis.com/css2?family=Patua+One&family=Roboto&display=swap" rel="stylesheet">
    <link href="mainstyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

</head>

<body class="cus_body patua_font">
    <div class="container">
        <div class="box ">
            <div class="cus_loginpad ">
                <h2 class="center1"><img src="images/sample.png" width="150" /></h2>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                </div>
                <div class="form-group">
                    <label for="pwd">Password</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
                </div>
                <button type="submit" class="btn btn-primary custom-btn"> Login </button>
            </div>
        </div>
    </div>
</body>

</html>

Answer 3

与上述内容相同，您需要这样做：

.box {
    background-color: #FAFAFA;
    width: 40%;
    min-width: 390px;
    height: auto;

    // You don't need this
    /* transform: translate(-50%, -50%); */
    /* left: 50%; */
    /* bottom: 50%; */
    /* padding: 20px 20px; */
    
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

.cus_body {
  background-image: linear-gradient(to right, #31E89F, #00aff4); /*this is now showing */
  
  // You need to position the parent as relative 
  // by centering it this way, it will be responsive by default
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
}

这是JSbin中的一个有效示例：
https://jsbin.com/fomasexala/3/edit?html,css,output

如何在屏幕中央对齐CSS框？

3 个答案: