布局解决方案 ---居中布局（水平居中）

最新推荐文章于 2023-05-07 20:19:36 发布

菜鸟小营地

最新推荐文章于 2023-05-07 20:19:36 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 html 文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_43318531/article/details/93753574

CSS3 同时被 2 个专栏收录

7 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文详细介绍并对比了五种CSS水平居中布局方法：使用inline-block和text-align，table和margin，absolute定位与transform，flex布局与justify-content，以及仅使用flex布局。每种方法都有其适用场景和兼容性考量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中

div布局

	<div class="parent">
        <div class="child"> demo</div>
    </div>

css样式

1.inline-block + text-align

优点：兼容性极佳(可兼容 IE6、IE 7)

		.parent {
            text-align: center;
        }
        .child{
            display: inline-block;
        }

2.table + margin

优点: 无需设置父元素样式（支持 IE 8 及其以上版本）

		.child {
           display: table;
           margin: 0 auto;
       }

3.absolute + transform

优点: 绝对定位脱离文档流，不会对后续元素的布局造成影响。
缺点：transform 为css3属性，有兼容性问题

		.parent {
           position: relative;
       }
       .child {
           position: absolute;
           left: 50%;
           transform: translateX(50%);
       }

4.flex + justify-content

优点：只需设置父节点属性，无需设置子元素
缺点：有兼容性问题

	.parent {
            display: flex;
            justify-content: center;
        } 
	/*这种也可以实现*/
	.parent {
         display: flex;
     }
     .child {
          margin: 0 auto;
     }