Bootstrap div vertical center + horizontal center keep responsive

Introduce bootstrap4 css file, only effective in bootstrap4, bs3 effect is not good:

Vertical centering: Create the following style for the div that needs vertical centering

.col-center-block {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Horizontally center, add a div to the outer layer of the div that needs to be centered, and add the following class to the outer div:

row justify-content-center

All codes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Register</title>
  <style type="text/css">
    /*表单样式*/
    .myformdiv {
        background-color: lightcoral;
        opacity: 0.85;
    }

    /*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，
    实际上此时div内容整体已经偏下，再把整个身子往上移动一半即可
    并针对不同浏览器进行兼容。
    */
    .col-center-block {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

</style>
</head>
<body>
  <!-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
  <div class="row justify-content-center ">   
    <!-- 下面是我要居中的div，添加.col-center-block -->
    <div class="col-center-block col-sm-4 col-xs-4 jumbotron myformdiv ">  
        <h2 class="text-center">Welcome To register!</h2>
        <div>
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group-lg">
                    <span class="input-group-addon"><b>username</b></span>
                    <input type="text" class="form-control" placeholder="username">
                </div>
                <br>
                <div class="input-group-lg">
                    <span class="input-group-addon "><b>password</b></span>
                    <input type="password" class="form-control" placeholder="password">
                </div>
                <br>
                <div class="input-group-lg">
                    <span class="input-group-addon "><b>email</b></span>
                    <input type="email" class="form-control" placeholder="email">
                </div>
                <br>
                <div style="margin-top: 2px;">
                    <button type="button" class="btn text-center btn-outline-light btn-lg"><a
                            href="#">Register</a></button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

effect:

col-sm-4 col-xs-4 these two grids are not necessary, I tried it. Although the size of the form will not scale with the window, it feels okay, and it can also be used on mobile phones.

I tried the same method for horizontal centering and vertical centering:

   .col-center-block{
        position:absolute;
        top:50%;
        -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            position: absolute;
        left:50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
    }

As a result, I ran to the left and went horizontally, still not centered ~~

Or use the top method, if there is a better one, you can share with each other.

Reference documents:

https://blog.csdn.net/qq_34735535/article/details/52698608?utm_source=blogxgwz3

Bootstrap div vertical center + horizontal center keep responsive

Guess you like