题目一：垂直水平居中
在HTML页面上，有一个div容器，它的宽度和高度都是固定的。请写出CSS代码，使这个div容器在页面上水平垂直居中。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}解析：使用绝对定位和transform属性，将div容器的上边和左边分别移动到页面上的50%位置，然后通过translate函数将容器向上向左移动自身宽高的一半，使其能够正好水平垂直居中。
题目二：三栏布局
有一个页面，需要实现三栏布局，其中左右两栏的宽度都是300px，中间栏的宽度随页面宽度的变化而变化。请写出CSS代码。
.left-column {
width: 300px;
float: left;
}
.right-column {
width: 300px;
float: right;
}
.middle-column {
margin-right: 300px;
margin-left: 300px;
}解析：通过float属性将左右两栏浮动在页面的左右两侧，并设置宽度为300px；中间栏则通过设置左右margin为300px，使其左右两边各留出300px的空白，自动将其宽度填满整个页面。
题目三：图片水平居中
有一张宽度为200px，高度为150px的图片，需要使其在页面上水平居中，并且与文字内容保持一定的距离。请写出CSS代码。
img {
display: block;
margin: 0 auto;
}解析：通过display属性将图片设置为块级元素，然后将左右外边距设置为auto，使其在包含块内水平居中。如果需要与文字内容保持一定的距离，可以在图片上下加上一些padding值。
以上是几个常见的CSS编程题及其解决方案。熟练掌握这些技巧，可以更加轻松地应对CSS布局相关的问题。