一聚教程网:一个值得你收藏的教程网站

热门教程

css 垂直居中的实现方法

时间:2022-06-25 10:13:00 编辑:袖梨 来源:一聚教程网

利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:

垂直居中

 代码如下 复制代码
* 代码实现:
 * 设定宽度和高度,父节点为 position:relative; CSS是这样写的:
 */
.selector {
     position:absolute;top:50%;。
     margin-top:-元素自身高度的一半;
}

实例

 代码如下 复制代码




 
 垂直居中
 
 
 



   

       

        google
       

这里面是内容啊,www.111com.net
       


       


        返回:垂直居中的几种实现方法 »
       


   


热门栏目