首页 > 前端 > div内元素垂直居中
2021
09-13

div内元素垂直居中

详细代码参考:

https://github.com/tiancityycf/frontend/blob/master/vertical.html


1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:
parentElement{
        position:relative;
}
childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
}


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

.parentElement{
        height:xxx;
}
.childElement {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
}
Flex 布局:
不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:
parentElement{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
  vertical-align:middle;
}

本文》有 0 条评论

留下一个回复