垂直居中的代码

最新推荐文章于 2022-07-05 19:10:19 发布

weixin_30734435

最新推荐文章于 2022-07-05 19:10:19 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/FineDay/articles/3521228.html

本文介绍了一种使用CSS实现元素在父容器中垂直居中的方法。通过设置不同层级的div元素并利用特定属性如position、top等，可以有效地使内部内容在垂直方向上居中显示。此方案适用于多种浏览器环境。

#outer {height: 600px; overflow: visible;width: 100%;position: relative;border:1px solid green;} /* or without overflow */
       #outer[id] {display: table; position: static;}
       #middle {position: absolute; top: 50%;} /* for explorer only*/
       #middle[id] {display: table-cell; vertical-align: middle; width: 100%;position:static;}
       #inner {position: relative; top: -50%} /* for explorer only */
       /* optional: #inner[id] {position: static;} */

<div id="outer" class="outer">
           <div id="middle">
               <div id="inner">
                   any text<br>
                   <b>any height</b><br>
                   any content, for example generated from DB<br>
                   everything is vertically centered<br>
               </div>
           </div>
       </div>

转载于:https://www.cnblogs.com/FineDay/articles/3521228.html