HTML--元素居中各种处理方法2

紧接上一篇。

如果要居中的是一个块元素呢。

1）如果你知道这个块元素的高度：

 <main>

   <div>
      I'm a block-level element with a fixed height, centered vertically within my parent.
   </div>

 </main>

 body {
   background: #f06d06;
   font-size: 80%;
 }

 main {
   background: white;
   height: 300px;
   margin: 20px;
   width: 300px;
   position: relative;
   resize: vertical;
   overflow: auto;
 }

 main div {
   position: absolute;
   top: 50%;
   left: 20px;
   right: 20px;
   height: 100px;
   margin-top: -70px;
   background: black;
   color: white;
   padding: 20px;
 }

resize 属性规定是否可由用户调整元素的尺寸。resize: none|both|horizontal|vertical;

总结起来就是

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   height: 100px;
   margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
 }

2）如果你不知道这个块元素的高度，因为他会变化的，比如图片变了，宽度变了，样式变了等等都会改变元素的高度。

 body {
   background: #f06d06;
   font-size: 80%;
 }

 main {
   background: white;
   height: 300px;
   margin: 20px;
   width: 300px;
   position: relative;
   resize: vertical;
   overflow: auto;
 }

 main div {
   position: absolute;
   top: 50%;
   left: 20px;
   right: 20px;
   background: black;
   color: white;
   padding: 20px;
   transform: translateY(-50%);
   resize: vertical;
   overflow: auto;
 }

总结起来就是要这样子：

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }

3）当然，如果你可以使用flex

main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

总结起来就是

 .parent {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

下面我们就要进入我们的难点了，就是如何水平垂直方向都达到居中。

一般情况下，我们可以结合上面的方法来达到目标。但是总有一些意外发生。

1）元素是固定的大小。首先你得设置外边距为负值，上边距为高度的一般，左边距为宽度的一般，其次在采用固定在50%/50%(上左或者下右)就可以了。

main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 200px;
  height: 100px;
  margin: -70px 0 0 -120px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
}

HTML代码和原来的一样，就不多说了。

总结起来就是：

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

2）不知道元素的大小。这是你可以利用transform的属性。使其在两个方向上都进行翻转-50%。这是基于当前元素的大小来进行剧中的。

main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

总结：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3)如果你可以使用flexbox;

main {
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

总结起来就是：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

总结

如果以上方法你都掌握了，居中对你而言就是一个小问题。