css布局图片文字位置

CSS布局是网页制作中非常重要的一部分，它可以控制页面元素的位置、大小、边距、背景等样式。其中，图片和文字的位置布局是网页制作中常见的需求。

对于图片，我们可以使用CSS样式来定义其位置。通过给图片设置定位属性（position），并设置top、bottom、left、right等属性值，可以将图片定位到页面的任何位置。例如：

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

上述代码可以将图片水平垂直居中显示，因为它将图片的左上角位置设置为页面的中心点。其中，transform属性可以实现水平垂直居中，它通过translate函数将元素位置进行平移。

对于文字，我们同样可以使用CSS样式来定义其位置。通过设置其父元素的position属性为relative，并设置left、top等属性值，可以将文字相对于其父元素进行定位。例如：

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

上述代码可以将文字定位于其父元素的中心点。这里的trnasform属性同样可以实现水平垂直居中的效果。

总之，通过CSS布局，我们可以灵活地控制页面元素的位置和样式，从而实现各种复杂的需求。