CSS中圖片和文字自動居中是網頁設計中常見的需求之一，它可以使網頁布局更加美觀，更加整潔。在此，我們將會介紹如何在CSS中實現圖片和文字的自動居中。

對于圖片，我們一般使用以下代碼實現自動居中，其中img-wrapper是用來包裹圖片的div元素：

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

這段代碼的含義是，將img-wrapper元素設為flex布局，在水平和垂直方向上都居中顯示。

對于文字，我們可以使用以下代碼實現自動居中：

.text-wrapper{
text-align: center;
line-height: 100px;
height: 100px;
}

這段代碼的含義是，將text-wrapper元素的文本居中顯示，并設置行高為100px，高度也為100px，確保文本在居中的同時垂直居中。

需要注意的是，在使用以上代碼時，需要根據實際情況進行調整，例如修改高度、行高等參數，才能達到最佳效果。