[小结]css垂直居中方式小结

  • 文字垂直居中
    例如:
.header__nav-item{
    height: 38px;
    line-height: 38px;
}
  • 块元素垂直居中于父元素(也叫负边距居中,宽高都适用)
.header__warp{ /*类似一个容器,父元素*/
    height: 80px;
    position: relative;
}
.header__logo{
    height: 38px;
    position: absolute;
    top:50%
    margin-top: -19px;/*行高的一半*/
}

或者可以水平对齐

.header__warp{ /*类似一个容器,父元素*/
    height: 80px;
    position: relative;
}
.header__logo{
    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: -960px;/*宽度的一半*/
}
  • 块元素(容器)水平居中
.header__warp{ /*类似一个容器*/
    margin: 0 auto;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容