Question

我有一个父容器和子容器，我需要将子容器对齐到中间（水平和垂直）。

HTML：

<section class="travelPlace">
    <div>
    </div>
</section>

CSS：

.travelPlace {
    width: 50%;
    height: 100%;
    float: left;
}
.travelPlace > div {
    width: 53.4375%;
    margin: 0 auto;
    background: url('../images/globe.png') center no-repeat;
    height: 344px;
    background-size: contain;
}

Answer 1

.travelPlace {width: 100px; height: 250px; position:relative;background:black;}
.travelPlace > div {position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
background: red;
height: 19px;
text-align: center;
display: block;
width: 100%;}

希望它有所帮助.Rajesh

Answer 2

也许你可以用这个代码做一些事情，我把背景变成黄色，内容变成红色，以便更容易看到。

＆＃13;

.travelPlace {width: 50%; height: 800px; background: yellow;}
.travelPlace > .something {width: 53.4375%; background: red; height: 344px; margin-top: -172px;}
.travelPlace > .somepusher{
  display: inline-block;
  height: 50%;
  width: 100%;
}

＆＃13;

<div class="travelPlace">
  <div class="somepusher"></div>
    <div class="something">           
    </div>
</div>

＆＃13;

基本上我做了什么：添加一个新的div，它是主Div的高度的50％，然后在内部div的顶部添加一个负边距，即内部div的高度的50％（172px）

Answer 3

您可以将display:table-cell用于您的父项，将display: inline-block用于您的子项。这是一个片段......

＆＃13;

.travelPlace {
  display: table-cell;
  width: 50%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: black;
  padding: 50px 0px 50px 0px;
}
.place {
  display: inline-block;
  width: 300px;
  height: 300px;
  text-align: left;
  background: #CCC;
}

＆＃13;

<section class="travelPlace">
  <div class="place">
  </div>
</section>

＆＃13;

垂直居中的儿童容器

3 个答案: