[分享]css中div框居中显示

CSS如何实现div框居中显示？

在web页面中，经常会使用div元素来布局页面，但是如何实现div框的居中显示呢？下面我们来介绍几种常用的方法。

1. text-align: center

div {
    text-align: center;
} 

这种方法只适用于子元素是行内元素的情况，如文本、图片等。此时只需要将父元素div的text-align属性设置为center即可将子元素居中显示。

2. margin: 0 auto

div {
    margin: 0 auto;
} 

这种方法适用于子元素是块级元素的情况，如div、ul等。此时只需要将父元素div的margin属性设置为0 auto即可将子元素水平居中显示。

3. position: absolute + margin

.container {
    position: relative;
}
.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -50px;
} 

这种方法适用于子元素宽度高度已知的情况。首先将父元素.container的position属性设置为relative，再将子元素.inner的position属性设置为absolute。在子元素.inner中，将left和top属性都设置为50%，再使用margin-left和margin-top属性将子元素向左和向上移动自身宽度和高度的一半即可将子元素居中显示。

综上所述，以上三种方法都可以实现div框的居中显示，具体选择哪种方法取决于子元素的类型和宽高是否已知。