当父div具有宽度：80vw

Question

.parent {
  width: 80vw;
  height: 200px;
  background-color: red;
  margin: 0 auto;
  text-align: center;
}

.child {
  width: 100vw;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

当父div宽度小于div时，如何将孩子child的中心对齐？如果父div的宽度为100vw，设置宽度为div时，如何设置子80vw？

Answer 1

如果您正在尝试这样做，请将父级居中，然后使用相对位置和左侧负值使孩子居中。

＆＃13;

＆＃13;

app.controller("loginCtrl", function($scope, $window){
$scope.submit = function(){
    $window.localStorage.setItem = ("username", $scope.username);
    };
 });

app.controller("homeCtrl", function($scope, $window){
$scope.logout = function(){
    $window.localStorage.getItem = ("username");
    };
 });

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 0 auto; /* center the parent in the screen */
}

.child {
  position: relative;
  width: 100vw;
  height: 100px;
  background-color: blue;
  /* center the child using a negative left */
  /* left: calc(50% - 50vw); */
  /* or */
  left: 50%;
  transform: translateX(-50%);
}

body {
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在子元素中设置margin-left: -10vw;。

＆＃13;

＆＃13;

.parent {
  width: 80vw;
  height: 200px;
  background-color: red;
  margin:auto;
}

.child {
  width: 100vw;
  height: 100px;
  background-color: blue;
  margin-left:  -10vw;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;