布局-水平居中

Posted 姜小七的填坑之旅

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局-水平居中相关的知识,希望对你有一定的参考价值。

结构:

1     <div class="parent">
2         <div class="child">DEMO</div>
3     </div>

样式:

1.方案1. text-align + inline-block  (对行内元素有效)

   .parent {
        background-color: grey;
        width: 500px;


        text-align: center;
    }
    .child {
        display: inline-block;
        
        background-color: skyblue;
    }/*内容会继承父元素的居中,若不想,则单独再设置一下text-align:left*/

2.方案2.  table + margin

1 .child {
2         display: table;/*表现上像block元素,但table的宽度随内容*/
3         margin: 0 auto;
4 
5         background-color: skyblue;
6     }
7     /*优点:只设置child,不用关系parent的样式,IE8+支持display:table
8       缺点:不兼容IE678,将结构直接换成table*/

3.方案3.  absolute + transform

 1     .parent {
 2         position: relative;
 3     }
 4     .child {
 5         position: absolute;/*脱离文档流的*/
 6         left: 50%;/*相对于容器的百分比*/
 7         transform: translateX(-50%);/*相对于自身的百分比*/
 8 
 9         background-color: skyblue;
10     }
11     /*优点:居中元素不会对其他元素产生影响
12       缺点:不兼容IE678*/

4.方案4.  flex  +  justify-content

1 .parent {
2         display: flex;
3         justify-content: center;/*设置水平方向上flex-item的对齐方式*/
4     }
5     /*优点:只要设置.parent样式
6       缺点:不兼容IE678*/

或者:
.parent {
display:flex;
}
.child {
margin: 0 auto;
}

 

以上是关于布局-水平居中的主要内容,如果未能解决你的问题,请参考以下文章

css常用代码片段 (更新中)

CSS布局:水平居中

片段中的布局不居中

Flex实现水平竖直居中布局

垂直居中,水平居中,垂直+水平居中,圣杯和双飞翼布局

关于flex布局垂直居中