0°

用 CSS 实现元素垂直居中的几种办法

517 个字符,1 张图片,大约需要 1 分钟阅读
用 CSS 实现元素垂直居中的几种办法

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:

parentElement{ 
    position:relative; 
} 
childElement{ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%)
}

2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可:

parentElement{ 
     height:xxx; 
} 
.childElement { 
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
 }

3.Flex 布局:

不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:

parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

原文:用 CSS 实现元素垂直居中,有哪些好的方案?

除非注明,否则均为喵喵喵博客原创文章,转载请以链接形式标明本文地址

本文链接:https://www.miaomiaomiao.org/9864.html

0 条回复 A 作者 M 管理员
    当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论