Question

我正在尝试根据浏览器视图高度对齐两个垂直居中的div。我也希望能够并排获得这些div。

我可以并排获得两个div，但不能将它们降低50％。当我放置它们top, left: 50%;时，它们会从那里开始然后继续。

是否可以使2个垂直中心并且彼此相邻？

这是JSfiddle link

或者如果它更容易，直接在这里输入代码：

CSS：

html {
/*set website minimum resolution*/
 min-width: 1366px;
 min-height: 768px;
 margin:0;
 color:#fff
}
.wrapper{
 /*set div to 100% browser width/height*/ 
 /*width and height fall back*/
 height: 100%;
 width: 100%;
 /*preferable height*/
 height:100vh;
}
.frame-work {
 /*move this div top/middle of screen*/ 
  text-align: center;
  position: absolute;
  top:50%;
  left: 50%;
}
.content {
  /*place inside frame-work side-by-side*/
  width:480px;
  height:300px;
  display: inline-block;
  position: relative;  
  background-color:#000
}

HTML

<div class="wrapper"> <!--100% w/h browser-->
    <div class="frame-work"> <!--container for 2 divs-->
        <div class="content"> <!--left div-->
            Lorem Ipsum Left
        </div>
        <div class="content"> <!--right div-->
            Lorem Ipsum Right
        </div>
    </div>
</div>

Answer 1

您可以使用display: flex;align-items: center;这是对齐中心的最佳方式

.frame-work {
    text-align: center;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
}

喜欢：https://jsfiddle.net/wxjd5z9w/9/

将2个div并排垂直居中于页面

1 个答案: