[分享]css中div内元素居中

在网页排版中，经常需要将元素居中，而css中给我们提供了多种方式实现居中布局。下面介绍div内元素居中的几种实现方式。.center{ display: flex; justifycontent: c...

在网页排版中，经常需要将元素居中，而css中给我们提供了多种方式实现居中布局。下面介绍div内元素居中的几种实现方式。

.center{
    display: flex;
    justify-content: center;
    align-items: center;
} 

其中display:flex;是使用flex布局方式使元素居中，justify-content:center;实现水平居中，align-items:center;实现垂直居中。这种方式适用于兼容性要求不高的场合，对于IE浏览器支持不友好。

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} 

上述代码使用了定位以及transform属性实现居中布局。position:absolute;实现绝对定位，之后top:50%;left:50%;将元素移动到位置，再使用transform属性的translate(-50%,-50%)实现居中。这种方式兼容性较好，但需要注意定位操作可能会对其他布局产生影响。

.center{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
} 

这种方式也是使用绝对定位，但与transform不同之处在于，使用top、bottom、left、right属性将元素位置设为0，再使用margin-auto实现自动居中。这种方式兼容性较好，但与transform方式一样，需要注意定位操作可能会对其他布局产生影响。

总之，以上三种方式是实现div内元素居中的常用方法，需要根据实际情况选择合适的方式。