Bootstrap登录框自适应水平居中+垂直居中

最新推荐文章于 2024-07-07 02:58:35 发布

shenzhen_zsw

最新推荐文章于 2024-07-07 02:58:35 发布

阅读量4.4w

点赞数 2

分类专栏：【WEB】Bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/shenzhen_zsw/article/details/75331515

版权

本文介绍了如何使用Bootstrap框架来创建一个响应式的登录框，并使其在页面中实现水平和垂直居中对齐。通过调整Bootstrap的栅格系统和CSS样式，详细步骤包括设置容器的display属性、使用flexbox布局以及设置margin为auto来达到居中效果。

摘要由CSDN通过智能技术生成

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>用户登录</title>
        <!-- Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <style>
            /*web background*/
            .container{
                display:table;
                height:100%;
            }

            .row{
                display: table-cell;
                vertical-align: middle;
            }
            /* centered columns styles */
            .row-centered {
                text-align:center;
            }
            .col-centered {
                dis