html - 使用Bootstrap 3在全屏中进行垂直和水平对齐

This question already has answers here:

How to center an element horizontally and vertically

                                    （21个回答）


                                4年前关闭。


我是这个世界的初学者，并且有一些我仍然需要学习的技巧，我正在设计中玩，而我最讨厌的是align。我正在尝试以全屏样式将其垂直和水平对齐。我已经尝试了一些不同的方法，但是它总是会在某些方面中断。

我正在使用最新的Bootstrap。

基本内容如下：
http://i.stack.imgur.com/RUL9K.png

谢谢你的时间。

最佳答案

您可以通过以下代码尝试：

<!DOCTYPE html>
<html>
<head>
    <title>Centering</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    jQuery(document).ready(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });

    // script for responsive;
    jQuery(window).resize(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });
</script>

<style type="text/css">
    .col-centered {
        margin:auto;
        float: none;
        text-align:center;
    }
</style>
</head>

<body>

    <section class="custom_name">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10 col-centered">
                    fsadfljsd
                </div>
            </div>
        </div>
    </section>

</body>
</html>