【CSS】不定高度的弹框水平垂直居中

秒速五厘米 2023-02-08 15:52 26阅读 0赞

### why ###

对于特定的高度的弹框这个问题很好处理，计算好弹框离父元素的的高度，使用margin处理即可。

但是为了通用性，不必每一次都去计算，有没有通用一点的方法呢，是有的, 通过vertical-aign来做。【也有其他绝对布局居中/flex布局居中的方法】

css 代码：

.container { 
          position: fixed;
          top: 0; right: 0; bottom: 0; left: 0;
          /* for IE8 */
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABtJREFUeNpiZGBgaGAgAjAxEAlGFVJHIUCAAQDcngCUgqGMqwAAAABJRU5ErkJggg==);
          /* for IE9+ */
          background: rgba(0,0,0,.2) ;
          text-align: center;
          white-space: nowrap;
          z-index: 99;
          overflow: auto; /* 弹框高度超过一屏的时候依然能够看见屏幕外的内容*/
        }
        .container:after { 
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .dialog { 
            display: inline-block;
            vertical-align: middle;
            border-radius: 6px;
            background-color: #fff;
            text-align: left;
            white-space: normal;
        }
    
        .content { 
          width: 500px; 
          height: 600px; /*高度随意调整都会在中间*/
        }

html元素：

### 解析 ###

一般情况下，使用`vertical-align:middle` 需要配合line-height来使用

`vertical-align`定义是元素的中线和字符x中心点对齐。

1，因为container的`font-size`设置为0，`x中心`点位置就是`.container`的上边缘, 此时高度为100%的伪元素因为设置为`inline-block`并且`vertical-align`为middle，这个伪元素的中心点应该和.container的上边缘对齐，这样这个伪元素的上面一半肯定在.container元素的外面，但是css中默认是是左上方排列对齐的， 所以此时伪元素和.container的原本在容器上边缘的x中心点，一起往下移动了半个容器的高度，也就是此时`x中心点就在容器的垂直中心点上`。【伪元素的目的就是为了将这个x中心点，挤压到.container元素的垂直一半高度上】

2，弹框元素.dialog 也 设置了`vertical-alignn:middle`。根据定义，弹框的垂直中心位置和x中心点位置对齐，因为此时`x中心点就在.container的垂直 中心位置`，所以此时就实现了垂直居中效果。  
     3，水平居中是`text-aign:center`来实现的。

--------------------

### tips ###

> x中心点，就是小写字母x的高度一半的位置，小写字母x的底部就是baseline基线。

下图来自：《css权威指南》第六章 - 垂直对齐  
![css权威指南][css]

vertial-align的middle位置就是基线往上 1/2 x-height高度。

这个例子来自于 张鑫旭《css世界》这本书5.3.8。

[css]: /images/20230208/6eb42a06c29c4e36b6c02844da3c8d83.png