Question

我尝试创建标题为110px高且内容具有垂直和水平居中框的HTML布局。

以下是我的内容（https://jsfiddle.net/9L58mn08/）：

＆＃13;

body {
  margin:0;
  background-attachment: fixed;
  background-color: #464646;
  background-image: url("https://pixabay.com/get/e837b2092dfc003ed1534705fb0938c9bd22ffd41db419439cf5c17ea5/beach-1236581_1920.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
.header {
  background: #333333 none repeat scroll 0 0;
  height: 110px !important;
  padding-top: 0 !important;
  width: 100%;
}
.frame_container {
  left: 50%;
  margin-top: 110px;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.frame{
  background:red;
  padding:20px;
}

＆＃13;

<body> 
  <div class="header">
    Header Content
  </div>
  <div class="frame_container">
    <div class="frame">
      This is the centered Content
    </div>
  </div>
</body>

＆＃13;

由于某种原因，框架不是垂直居中的，我哪里错了？

Answer 1

应用margin-top，高度的一半：

.frame_container
{
   left: 50%;
   margin-top: 55px;
   position: absolute;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
}

working demo

Answer 2

我会尝试som fancy css math。

.frame_container
{
    left: 50%;
    top: calc(50% + 28px);;
    position: absolute;
    transform: translateX(-50%);
}

或使用Bhojendras版本。

HTML和CSS水平和垂直居中，标题为

2 个答案: