如何在方形 div 中居中内容并使用 bootstrap.css 保持纵横比？

Question

我想根据屏幕尺寸显示方形框。问题是我无法将内容集中在我的方形 div 中并且没有良好的纵横比。内容框的大小是固定的。

目标：

• case lg => 显示 6 divs / row (6 columns) => col-lg-2;
• case md => 显示 5 个 div / 行（5 列） => col-md-5（自定义类女巫适用 20%）；
• case sm => 显示 3 divs / row (3 columns) => col-sm-4;
• case xs => 显示 2 divs / row (2 columns) => col-sm-6;

    var app = angular.module('myApp',[]);

    app.controller('MainCtrl',['$scope', function($scope){
    $scope.test = 'Angular works !!';
    $scope.data = [];
    for(var i=0;i<50;i++){
    $scope.data.push('item ' + i);
    }
    }]);

    .square { 
        border: 5px solid red;
        position: relative;
        text-align: center;
        /*width: 50%;*/
      }

    .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
      }

      .content {
        position: absolute;
        width: 200px;
        height: 200px;
        border:solid blue 1px;
        font-size: 2em;
        top:0%;
        left:0%;
        padding-top: 0%;
      }
    .col-xs-15 {
        width: 20%;
        float: left;
    }
    @media screen and (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
    }
    @media screen and (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
    }
    @media screen and (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
    }

  <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <div class="container-fluid" ng-app="myApp" ng-controller="MainCtrl">
      <div ng-repeat="items in data" class="square col-lg-2 col-md-15 col-sm-4 col-xs-6">
        <div class="content">
          Hello!
        </div>
      </div>
    </div>

Answer 1

由于您知道 .content div 的高度和宽度，您可以使用 calc() 函数将其定位在中心。

.square { 
    border: 5px solid red;
    text-align: center;
}

.content {
    width: 200px;
    height: 200px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: calc(50% - 100px);
    border:solid blue 1px;
    font-size: 2em;
}

小提琴：https://jsfiddle.net/4cun1aex/