css垂直居中

1.父元素不设置高度,子元素设置padding撑开,形成垂直居中

2.父元素高度固定,利用table属性居中对齐.

3.父元素高度固定,伪类:before,高度设置为100%,vertical-align:middle,(子元素为块元素,vertical-align:middle为子元素与父元素中线对齐)

4.父元素写相对定位子元素绝对定位垂直居中position:absolute;top:50%;left:50%;然后再通过负margin实现居中,或者通过transform:translate(-50%,50%)

5.margin:auto;top:0;left:0;

6.flex属性,父元素设置justify-content:center;align-items:center;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 垂直居中有几种实现方式 父元素上下padding设置成一样大小代码2.绝对定位position: absolute...
    饥人谷_wanpp阅读 3,751评论 0 47
  • 前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂...
    秦至阅读 4,028评论 1 2
  • 使用绝对定位和负外边距对块级元素进行垂直居中 html代码: css代码: 运行结果如下: 这个方法兼容性不错,但...
    深沉的简单阅读 2,144评论 0 2
  • CSS实现垂直居中在网页布局中是经常会用到的,所以一定要牢记这些方法以应对之,写下这篇文章也是为了巩固自己的知识点...
    大春春阅读 4,932评论 0 2

友情链接更多精彩内容