What is the best way to center a CSS box on the screen?

Question

What is the best way to center a CSS box on the screen?

I am attempting to center the login box on the screen, but when using position: absolute the background color changes to white.

/* 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f5eaf5f5e0f7abeff6c5b4abb4b3abb5">[email protected]</a>/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>

Is there a way to keep the background: linear-gradient(to right, #31E89F, #00aff4) while centering the login box? Thank you.

html css bootstrap-4

Answer 1

Answer №1

To achieve the desired layout, consider using the CSS property display: flex. Alternatively, you can also utilize display: grid, but flexbox is often preferred due to compatibility with older browsers like IE. If compatibility with IE is not a concern, grid layouts can be a great choice.

For detailed guidance on centering elements horizontally, vertically, or both, refer to this informative resource: center any element.

Below is an example that demonstrates how to center a box. The CSS class .container is used with flex properties for centering. Alternatively, you can create a new class specifically for centering this login-box if you prefer only certain content to be centered on your pages.

/* 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);
}

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d0cfd0d0c5d28ecad3e0918e91968e90">[email protected]</a>/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>

Answer 2

To achieve the desired layout, consider using the CSS property display: flex. Alternatively, you can also utilize display: grid, but flexbox is often preferred due to compatibility with older browsers like IE. If compatibility with IE is not a concern, grid layouts can be a great choice.

For detailed guidance on centering elements horizontally, vertically, or both, refer to this informative resource: center any element.

Below is an example that demonstrates how to center a box. The CSS class .container is used with flex properties for centering. Alternatively, you can create a new class specifically for centering this login-box if you prefer only certain content to be centered on your pages.

/* 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);
}

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d0cfd0d0c5d28ecad3e0918e91968e90">[email protected]</a>/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>

Answer 3

Answer №2

Need a quick way to center your content? Use

.container{display: flex; height:100vh;}

- then simply add .box{margin: auto;} to center your box both vertically and horizontally.

For the best experience, view the following snippet in fullscreen mode to witness the magic :)

/* 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 4

Need a quick way to center your content? Use

.container{display: flex; height:100vh;}

- then simply add .box{margin: auto;} to center your box both vertically and horizontally.

For the best experience, view the following snippet in fullscreen mode to witness the magic :)

/* 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 5

Answer №3

Similar to the suggestions above, you will require the following code:

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

    /* You can omit the following commented out lines */
    /* 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 */
  
  /* Ensure the parent is relatively positioned */
  /* By centering it this way, it will be responsive by default */
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
}

For a demonstration of this code in action, visit the JSbin link below:
https://jsbin.com/fomasexala/3/edit?html,css,output

Answer 6

Similar to the suggestions above, you will require the following code:

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

    /* You can omit the following commented out lines */
    /* 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 */
  
  /* Ensure the parent is relatively positioned */
  /* By centering it this way, it will be responsive by default */
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
}

For a demonstration of this code in action, visit the JSbin link below:
https://jsbin.com/fomasexala/3/edit?html,css,output

What is the best way to center a CSS box on the screen?

Answer №1

Answer №2

Answer №3

Similar questions

Superimpose one element on top of another

Seeking particular section of online content in an asynchronous manner

The "Read more" feature is not functional on mobile devices

"The presence of the <textarea> element is causing disruptions to the

``There seems to be a problem regarding the alignment of elements in

The alignment is off

Tips for customizing the appearance of a child component using the parent component in Vue.js

What is the most effective method for displaying a child modal within a map?

The autocomplete feature in Jquery tagsinput is malfunctioning within a Bootstrap modal

Adapting CSS according to input selection

Enhance Your Webpage with jQuery Drag and Drop Feature Across Multiple Lists

What could be the reason for the child elements not being centered in a bootstrap navbar in this basic code example

Resizing Your WordPress Header Logo

Is there a way to embed an AJAX submit form into a notification without the need for page refresh?

Conceal a different div unless it includes

Creating custom style sheets in Smarty

Inspect HTML elements using Jinja2 placeholders

What is the best way to start with maximum padding when in full screen mode, and then gradually decrease to minimum padding as the browser width decreases?

Trouble with integrating jQuery Mobile data-role page into a PHP project

Traverse div elements using jQuery and showcase the text within them