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

紧接上一篇。

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

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

 1 <main>
 2   
 3   <div>
 4      I'm a block-level element with a fixed height, centered vertically within my parent.
 5   </div>
 6   
 7 </main>
 8 
 9 
10 body {
11   background: #f06d06;
12   font-size: 80%;
13 }
14 
15 main {
16   background: white;
17   height: 300px;
18   margin: 20px;
19   width: 300px;
20   position: relative;
21   resize: vertical;
22   overflow: auto;
23 }
24 
25 main div {
26   position: absolute;
27   top: 50%;
28   left: 20px;
29   right: 20px;
30   height: 100px;
31   margin-top: -70px;
32   background: black;
33   color: white;
34   padding: 20px;
35 }
View Code

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

总结起来就是

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   height: 100px;
8   margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
9 }
View Code

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

 1 body {
 2   background: #f06d06;
 3   font-size: 80%;
 4 }
 5 
 6 main {
 7   background: white;
 8   height: 300px;
 9   margin: 20px;
10   width: 300px;
11   position: relative;
12   resize: vertical;
13   overflow: auto;
14 }
15 
16 main div {
17   position: absolute;
18   top: 50%;
19   left: 20px;
20   right: 20px;
21   background: black;
22   color: white;
23   padding: 20px;
24   transform: translateY(-50%);
25   resize: vertical;
26   overflow: auto;
27 }
View Code

总结起来就是要这样子：

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   transform: translateY(-50%);
8 }
View Code

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;
}
View Code

总结起来就是

1 .parent {
2   display: flex;
3   flex-direction: column;
4   justify-content: center;
5 }
View Code

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

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

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;
}
View Code

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

总结起来就是：

.parent {
  position: relative;
}

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

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

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

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;
}
View Code

总结：

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

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;
}
View Code

总结起来就是：

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

总结

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

 

posted @ 2016-03-18 11:14  huansky  阅读(361)  评论(0)  编辑  收藏  举报