CSS实现垂直居中的常用方法

[ 2021-06-18 11:20:32 | 作者: admin ]

字号: 大 | 中 | 小

attachments/202106/18_113218__20210618113155.png

方法一：

   html,body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   }
   .box{
   width: 300px;
   height: 300px;
   background: orange;
   margin: 0 auto; /*水平居中*/
   position: relative;
   top: 50%; /*头部向下偏移50%*/
   margin-top: -150px; /*整体上移一半高度实现垂直居中*/
   }

方法二：

   html,body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   }
   .box{
   width: 300px;
   height: 300px;
   background: orange;
   margin: 0 auto; /*水平居中*/
   position: relative;
   top: 50%; /*头部向下偏移50%*/
   transform: translateY(-50%); /*利用transform整体上移一半高度实现垂直居中*/
   }

方法三：上面的两种方法，我们都是基于设置div的top值为50%之后，再进行调整垂偏移量来实现居中的。如果使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。具体代码如下，对代码不做过多的解释，如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：

方法四：张鑫旭老师的《CSS世界》一书，不采用CSS3，而是使用了CSS2的vertical-align，通过一些黑科技手段实现了垂直居中，有兴趣的同学可以研究一下。具体实现如下：
假设类名是.dialog，则 HTML 如下：

核心 CSS 代码如下：

.container {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0,0,0,.5);
   text-align: center;
   font-size: 0;
   white-space: nowrap;
   overflow: auto;
}

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

.dialog {
   display: inline-block;
   vertical-align: middle;
   text-align: left;
   font-size: 14px;
   white-space: normal;
}

文章：https://www.cnblogs.com/yugege/p/5246652.html

[最后修改由 admin，于 2021-06-18 11:32:20]