无法将 div 内容定位到页面中心答案

【问题标题】：Unable to position the div content to center of page无法将 div 内容定位到页面中心
【发布时间】：2016-09-15 09:29:25
【问题描述】：

我正在使用 Angulars UI 路由器分别加载每个页面。我在 header.html 中有标题导航栏和侧边栏，在 login.html 中有主内容（动态）

这里是链接：http://angularspring-management999.rhcloud.com/default.html

示例代码：

<body>
    <div id="wrap">

        <!--header-->
        <div ui-view="header"></div>

        <!--sidebar-->
        <div ui-view="sidebar"></div>

        <!--main content-->
        <div ui-view="content"></div>
    </div>

    <!--footer-->
    <div ui-view="footer"></div>
</body>

州：

myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("/Login");

var header = {
    templateUrl: 'views/Header.html',
    controller: function ($scope) {
    }
};

var sidebar = {
    templateUrl: 'views/SideBar.html',
    controller: function ($scope) {
    }
};

var footer = {
    templateUrl: 'views/Footer.html',
    controller: function ($scope) {
    }
};
// Now set up the states
$stateProvider
    .state('Login', {
        url: "/Login",
        views: {
            'header': header,
            'sidebar': sidebar,
            content: {
                templateUrl: 'views/Login.html',
                controller: function ($scope) {
                }
            },
            'footer': footer
        }
    });

【问题讨论】：

请在问题本身中包含相关代码。一旦该链接变坏，这个问题将毫无用处。见minimal reproducible example。
@MikeMcCaughan 代码很大。我会尽量精简并尽快更新它:)

标签： html css angularjs twitter-bootstrap-3

【解决方案1】：

这样的东西不能使用引导网格吗？

<div class="row">
    <div class="col-xs-3">
        <div ui-view="view-1"></div>
    </div>
    <div class="col-xs-9">
        <div ui-view="view-2"></div>
    </div>
</div>

我只在我的应用程序中使用过 1 个 ui-view 元素，然后为此类功能创建了自定义指令。但是根据文档，您的方式应该没问题。请注意，有时 ui-view 可以覆盖某些模板属性。

【讨论】：

这种需求是否有自定义指令选项？我不知道。我尝试了与您上面的代码类似的方法，但没有成功。
即使没有自定义指令，假设正确包含引导程序，您始终可以只创建 1 个 ui-view 并在该视图中包含您想要的任何 html。自定义指令是可选的，以保持可重用和模块化。
感谢上面的代码工作。我想知道为什么当我尝试用行包裹 col-md-6 时它不起作用
xs 适用于所有屏幕尺寸。 md 仅适用于 md 及更大的屏幕尺寸。因此，在较小的屏幕上使用 md 是行不通的。
我想如果我没记错的话，笔记本电脑应该是 md 对吧？