想当年，css3还没出来。css2大行其道的时候，就已经存在各种有趣的前端css实现。温故而知新，也是一种不错的体验。

话不多说，先放一道大概7,8年前就遇到的问题。

1.题目：有一个div 宽和高都是200px。 只要往div里面加任意的四个div，里面的div宽和高都会是原来50%，分别在左右上下；任意加div，就会向四个角延伸。同时，整个div是垂直水平居中浏览器。（如下图）

图解：任意添加div，就分别向4个角延伸 注：请使用尽量简洁的代码实现这个效果。

分析：这道题乍眼一看不知所云，其实考点就只有2个。

第一点是垂直水平居中。

想当年，垂直水平居中实现方式就是定位+负边距，或者使用table的方法。 现在，除了这些，还能灵活使用flex布局，或者使用translate(-50%, -50%)来达到垂直水平居中的目的。

第二点，就是定位了。 这里要注意的就是子元素要50%，还是负100%了。（具体看实现代码）

总的来说，要做到代码简洁，那么子元素就应该要继承父元素的样式，这样就能一劳永逸了。 现在我就抛猪引肉，放出一种实现的方法，期待小伙伴更多的实现方法。

    
    
	
     
      
       
      
     
     
      
       
      
     
     
      
       
      
     
     
      
       
      
     
    
复制代码

顺便贴一下实现url：

题目2：

这是一道考对定位有多了解的题目。考点和题目一很类似，还是考的定位和垂直水平居中。

1.难点是4张图片要始终保持同一水平线，还要垂直水平于页面。

2.其实只要把图片作为基准，去实现就行。其他文字描述都根据这些图片去定位就行。 3.但是由于文字的多少是无法确定的，这里的定位就比较考你对定位的了解了。 话不多说，继续抛猪引肉。

    
    
	
     
	
      
	
       
	
        
副标题副标题副标题211111111111德萨阿萨德萨达萨达的撒的飒飒大的撒大飒飒的盛大阿萨德萨达萨达萨达萨达副标题副标题
	
        
大神进来卡萨丁进拉萨的就流口水大
   
       
 
      
	
      
      
	
       
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      
     
   
     
	
      
	
       
	
        
副标题副标题副标题副标题副标题副副标题副标题副标题副标题副标题副标题副标题副标题标题副标题副标题
	
        
大神进来卡萨丁进拉萨的就流口水大
 
       
   
      
	
      
      
	
       
内容内容内容内容内容内容内容内容内容内容内萨达萨达啊实打实的容内容内容内容内容内容内容内容内容
      
     
     
	
      
	
       
	
        
副标题副标题副标题副标题副标题副标题副标题
	
        
大神进来卡萨丁进拉萨的就流口水大
  
       
  
      
	
      
      
	
       
容内容内容内容内容内容大萨顶顶的顶顶顶顶顶顶顶顶顶顶的顶顶顶顶顶大三十大撒的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶内容内容内容
      
     
     
	
      
	
       
	
        
副标题副标题副标题副标题副标题副标题副标题副标题
	
        
大神进来卡萨丁进拉萨的就流口水大
  
       
  
      
	
      
      
	
       
内容内容内容内容内容内容内容的撒的撒大大萨达萨达撒大声地德萨上大大声的撒内打算点飒飒的撒大大2容内容内容内容内容内容内容内容内容内容内容内容
      
     
    
  复制代码

demo的url：

总结：2道题目其实都是考察定位的知识，顺带蹭了一点垂直水平居中的点。我扔的例子并没有使用css3的知识来实现，期待小伙伴们提供更多更好更简洁的实现方法。

Author: Alone

Antroduction: 高级前端开发工程师 Sign: 前端如逆水行舟，不进则退。