淘先锋技术网

首页 1 2 3 4 5 6 7

近日,腾讯公司的css笔试题陆续在网络上曝光,引起了不少程序员的关注。本文将对该笔试题进行介绍,并结合代码进行解析。

首先是该笔试题的题目:

写出一个可以让下列元素水平居中,垂直居中的布局
<div class="parent">
<div class="child"></div>
</div>

这个题目看似简单,实际上涉及到了css布局中的经典难点。下面我们来看一下代码。

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
background-color: red;
}

通过设置父容器的display属性为flex,以及设置justify-content和align-items属性为center,我们可以将子元素在水平和垂直方向上居中对齐。同时,我们可以通过设置子元素的宽度和高度来控制其大小。

以上就是腾讯公司css笔试题的解答方法。当然,这只是其中一种解法,在实际开发中还有许多其他的布局方案可以实现同样的效果。