实现CSS样式垂直水平完全居中

1、水平居中

 

a、内联元素（inline or inline-*）居中?

 

你可以让他相对父级块级元素居中对齐

1 .center-children {
2   text-align: center;
3 }

 

b、块级元素（block level）居中?

 

你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果），如。

1 .center-me {
2   margin: 0 auto;
3 }

 

c、如果有很多块级元素呢？

 

如果你有很匀块级元素需要水平居中成一行，你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子同时使用float:left,right。

 

在线示例： http://jsfiddle.net/ourjs/0b6b7wt8/

 1 <main class="inline-block-center">
 2   <div>
 3     I'm an element that is block-like with my siblings and we're centered in a row.
 4   </div>
 5   <div>
 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
 7   </div>
 8   <div>
 9     I'm an element that is block-like with my siblings and we're centered in a row.
10   </div>
11 </main>
12 <main class="flex-center">
13   <div>
14     I'm an element that is block-like with my siblings and we're centered in a row.
15   </div>
16   <div>
17     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
18   </div>
19   <div>
20     I'm an element that is block-like with my siblings and we're centered in a row.
21   </div>
22 </main>
23  
24 
25 body {
26   background: #f06d06;
27   font-size: 80%;
28 }
29 main {
30   background: white;
31   margin: 20px 0;
32   padding: 10px;
33 }
34 main div {
35   background: black;
36   color: white;
37   padding: 15px;
38   max-width: 125px;
39   margin: 5px;
40 }
41 .inline-block-center {
42   text-align: center;
43 }
44 .inline-block-center div {
45   display: inline-block;
46   text-align: left;
47 }
48 .flex-center {
49   display: flex;
50   justify-content: center;
51 }

 

 

2、垂直居中

 

垂直居中在CSS中有点棘手

 

内联元素（inline or inline-*）居中，像文本和链接那样的？

 

a、它是一行的吗？

 

有时侯元素可以表现像垂直居中，只是因为它们有相等的上下padding

1 .link {
2   padding-top: 30px;
3   padding-bottom: 30px;
4 }

 

如果padding因为某些原因不能用，而且文本不会换行的情况下，你可以使用line-height，让其与height相等去对齐文本。

1 .center-text-trick {
2   height: 100px;
3   line-height: 100px;
4   white-space: nowrap;
5 }

 

b、它是多行的？

 

上下等padding的方式也可以让多行居中，但是如果这方法没用，你可以让这些文字的容器按table cell模式显示，然后设置文字的vertical-align属性对齐，就像talbe那样

 

在线演示： http://jsfiddle.net/ourjs/0fn2u4rc/

 1 <table>
 2   <tr>
 3     <td>
 4       I'm vertically centered multiple lines of text in a real table cell.
 5     </td>
 6   </tr>
 7 </table>
 8 <div class="center-table">
 9   <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
10 </div>
11 body {
12   background: #f06d06;
13   font-size: 80%;
14 }
15 table {
16   background: white;
17   width: 240px;
18   border-collapse: separate;
19   margin: 20px;
20   height: 250px;
21 }
22 table td {
23   background: black;
24   color: white;
25   padding: 20px;
26   border: 10px solid white;
27   /* default is vertical-align: middle; */
28 }
29 .center-table {
30   display: table;
31   height: 250px;
32   background: white;
33   width: 240px;
34   margin: 20px;
35 }
36 .center-table p {
37   display: table-cell;
38   margin: 0;
39   background: black;
40   color: white;
41   padding: 20px;
42   border: 10px solid white;
43   vertical-align: middle;
44 }

 

c、块级元素（block level）垂直居中?

 

（1）你知道元素的高度吗？

 

出于很多方面的原因，不知道网页布局的高度是相当普遍的。

 

但是如果你的布局有一个固定高度，你就可以这样垂直居中：

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   height: 100px;
8   margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
9 }

 

（2）元素的高度是未知的

 

尽管未知，但你仍有可能向上推移50%的宽度

 

在线演示： http://jsfiddle.net/ourjs/9sLf7p56/

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

 

d、你可以使用flexbox吗？

 

这并不奇怪，使用flexbox会容易非常多

 1 <main>  
 2   <div>
 3      I'm a block-level element with an unknown height, centered vertically within my parent.
 4   </div>  
 5 </main>
 6 body {
 7   background: #f06d06;
 8   font-size: 80%;
 9 }
10 main {
11   background: white;
12   height: 300px;
13   width: 200px;
14   padding: 20px;
15   margin: 20px;
16   display: flex;
17   flex-direction: column;
18   justify-content: center;
19   resize: vertical;
20   overflow: auto;
21 }
22 main div {
23   background: black;
24   color: white;
25   padding: 20px;
26   resize: vertical;
27   overflow: auto;
28 }

 

3、同时水平和垂直居中

 

a、元素有固定的宽度和高度

 

如果元素的宽度和高度是固定的，你需要先绝对居中，然后上移和左移50%的宽度即可，这种方案有极好的跨浏览器支持。

 1 .parent {
 2   position: relative;
 3 }
 4 .child {
 5   width: 300px;
 6   height: 100px;
 7   padding: 20px;
 8   position: absolute;
 9   top: 50%;
10   left: 50%;
11   margin: -70px 0 0 -170px;
12 }

 

b、元素的宽度高度未知

 

如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

1 .parent {
2   position: relative;
3 }
4 .child {
5   position: absolute;
6   top: 50%;
7   left: 50%;
8   transform: translate(-50%, -50%);
9 }

 

posted @ 2017-03-20 22:20  Sarah119  Views(201)  Comments(0)  Edit  收藏  举报