css+div水平居中对齐总结（4种解决方案）

来源：互联网发布：java大连招聘信息编辑：程序博客网时间：2024/06/05 08:54

子元素于父元素水平居中且其（子元素与父元素）高度均可变

方案一：absolute + transform

优点：绝对定位脱离文档流，不会对后续元素的布局造成影响

缺点：transform 为 CSS3 属性，有兼容性问题

<div class="parent"><div class="child">文字</div></div><style>.parent{position:relative;}.child{display:absolute;left: 50%;transition: translateX(-50%);}</style>

方案二：inline-block + text-align 优点：兼容性好

<div class="parent"><div class="child">文字</div></div><style>.child{display: inline-block;}.parent{text-align: center;}</style>

方案三：table+margin 优点：无需设置父元素样式（支持IE8及其以上版本）

<div class="parent"><div class="child">文字</div></div><style>.child{display: table;margin: 0 auto;}</style>

方案四：flex + justify-content 注：无需设置子元素样式，但存在兼容性问题

<div class="parent"><div class="child">文字</div></div><style>.parent{display: flex;justify-content: center;}</style>

阅读全文

0 0