周刊5# 居中之美
作者：大漠 日期：2014-11-22 点击：10933
居中的效果在Web应用中时常碰到，但就因为这样的效果常常让很多同学为难。比如说文本居中，水平居中，垂直居中，浮动元素居中等等。而且这也常常让面试官拿来当面试题，我也不例外，常常出这样的一道题：“元素A中包含B元素，而且B元素有可能是一行文本、多行文本，图片（未知大小），如何让B元素在A元素中实现水平垂直居中效果”。而这样的一道题也难倒了很多面试者，今天出这个周刊，主要搜集了有关于居中实现的解决方案。
CSS制作水平垂直居中对齐
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。
CSS制作图片水平垂直居中
做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。
如何只用CSS做到完全居中
“完全居中”并不是本篇文章中唯一的选项。要做到垂直居中，还存在着其他方法，各有各的长处。采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。
12种CSS实现水平垂直居中
实现元素水平、垂直居中方法有很多种，但很少有同学会将所有能实现居中的方法归纳在一起。这篇文章的作者收集了CSS实现水平垂直居中的12种方法。这些方法或许你已经接触过，或者使用过，也或者有从未看到过。此文用来扩展大家思路，领略CSS实现水平垂直居中之美。
CSS实现居中的七种方法
实现页面上的元素水平居中往往是最简单的,垂直居中更难实现,结合这两个是最困难的。响应式设计,我们很少知道元素的显式的高度或宽度,消除许多可能性。这增加了水平垂直居中的难度。这篇文章，作者从最简单的开始,慢慢接触复杂的实现方案。
