水平居中对齐在页面布局中是最为常见的一种布局方式，标题出现较多；下面我们看看常见的四种水平居中对齐方式：1、使用margin：0auto;进行布局.content{width:100px;
水平居中对齐在页面布局中是最为常见的一种布局方式，标题出现较多；下面我们看看常见的四种水平居中对齐方式：
1、 使用margin：0 auto; 进行布局
.content{ width:100px; height:100px; margin:0 auto; background-color:red; }2、使用绝对定位布局
.parent{ width:400px; height:200px; border:1px solid #000; position:relative; } .child{ width:100px; height:100px; background-color:red; position:absolute; left:50%; margin-left:-50px; //50为容器宽度的一半 } 3、使用text-align:center;和inline-block进行布局
.parent{ width:400px; height:200px; border:1px solid #000; text-align:center; } .child{ width:100px; height:100px; background-color:red; display:inline-block; } 4、使用table进行布局
.parent{ width:400px; height:200px; border:1px solid #000; } .child{ background-color:red; display:table; margin:0 auto; } 本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。