垂直居中总结

Posted 2021-01-02 deepblue775737449

• 行高法（line-height）：
  如果要垂直居中的只有一行inline元素，只要让其行高（line-height）和容器的高度(height)相同即可，比如：

① 它的父盒子是block.

# html:
<div> CSS权威指南 </div>
<p> Python编程：从入门到实践 </p>

# CSS:
div{border:3px solid red;height:100px;line-height:100px;}
p{border:3px solid blue;height:100px;line-height:100px;}

?

② 如果是inline元素，它没有高度属性可以调整，只有水平居中，只能临时把它{display:inline-block},例如：

<span class="span">
    觀自在菩薩，行深般若波羅蜜多時，照見五蘊皆空，度一切苦厄。
</span>

# CSS:
span{height:100px;line-height:100px;outline:3px solid red;display: inline-block;}

?

##PS.line-height方法只适用于非换行元素(即一行文字)，若超过一行/换行，则失效（垂直居中的只有第一行）。

• 内边距（padding）法:原理就是利用padding将内容垂直居中。

# HTML:
<div> div.border.padding </div>
<p> p.outline.padding </p>

# CSS:
div{border:3px solid red;padding:40px 0;}
p{outline:3px solid green;padding:40px 0;}

?

• 模拟表格法:将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
  实质上起作用的是table-cell,table并无效果。利用table-cell可以定义内部元素水平/垂直对齐的性质以达到目的。

# HTML:
<div class="container">
    <div class="div1">测试垂直居中效果测试垂直居中效果</div>
</div>

# CSS:
.container {
            width: 300px;
            height: 300px;
            border: 3px solid;
            text-align: center;
            vertical-align: middle;
            display: table-cell; #将父盒子设置为table-cell，相当于table的td。
           }
            
.div1 {
        width: 100px;
        height: 100px;
        border: 3px solid red;
        background-color: yellow;
        display: inline-block;#此句对垂直居中无影响，是为了将目标div水平居中而设置。
       }

?

table-cell内部元素是一个整体，居中也是整体居中。

#CSS：
.container {
          width: 300px;
          height: 500px;
          border: 5px solid red;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          }
            
.div1 {
        width: 100px;
        height: 100px;
        border: 5px solid blue;
        display: inline-block;
        }
            
.p1 {
    outline: 5px solid green
    }
    
# HTML：
<div class="container">
    <div class="div1"> div </div>
    <p class="p1"> This is a paragraph </p>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1278361/profile/profile-80.jpg?100000" >
</div>

?
PS.table-cell还有很多有趣的用法，待述。

---

• transform法:很简单，只需给要居中的目标元素写入如下样式。

position:relative; #若使用absolute须给父框+ position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
# 缺点：可能干扰其他 transform 效果。

---

• 绝对定位与负边距法：利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

# CSS:
.container {
            border: 3px solid red;
            width: 300px;
            height: 300px;
            position: relative;
            }
            
.div1 {
       border: 3px solid green;
       width: 100px;
       height: 100px;
       position: absolute;
       top: 50%;    /* 父框height*50% */
       left: 50%;  /* 父框width*50% */
       margin: -50px 0 0 -50px;   
       }
# HTML:
<div class="container">
    <div class="div1">div1</div>
</div>

PS. 其实‘绝对定位与负边距法‘与‘transform法‘原理是一样的，只是使用的属性不同。

---

• 伪元素法：

.container::after{
    content:‘‘;
    height:100%;
}
.container::after, .son{
    display:inline-block;
    vertical-align:middle;
}

优点：适合所有浏览器。

---

• Flexbox法：

# HTML:
<div class="container">
    <div class="div1">codepen.io</div>
</div>

# CSS:
.container {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            margin: 20px auto;
            padding: 10px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            }
            
.div1 {
       width: 100px;
       height: 100px;
       border: 3px solid green;
       line-height: 100px;
       text-align: center;
       }

?

##PS. Flex是CSS3中一大类新语法，需要另附章节。

[附录.CSS3中新加入Flex方法：]

• Flex (2012版)

.container {
            display: flex;
            align-items: center;
            }
/* 父盒子使用此设置，子元素无须任何属性即可实现垂直居中 */

优点：内容块的宽高任意。
缺点：IE8/IE9不支持/需浏览器厂商前缀。

• flex （2009版.）

.container {
            display: box;
            box-orient: vertical;
            box-pack: center;
            }

缺点：不支持IE