关于元素水平垂直居中的那些事？

关于元素水平垂直居中的那些事？

中国式的美，总是少不了对称美的存在。对称美，存在于建筑之上，也巧秀于美食之中。对称之美，中国之风！美，用户体验的一种，作为用户体验的打造者，我们是不是也应该知道些有关于前端开发中的对称美呢？那我们大前端中到底存在些什么对称美呢？ok，那我们今天就来聊聊，关于元素水平垂直居中的那些事吧！

什么是元素水平垂直居中？

什么是元素水平垂直居中？想必大家看到这问题，心里早已经有数了！水平则为左右，垂直即为上下，居中亦为中心。也就是说，我们在使用元素的时候，有可能要水平居中，也有可能要上下居中，还有可能水平垂直同时居中。当然啦，至于需要怎么居中，那肯定是要根据客户的需求而定。

有哪些方法可以实现水平垂直居中对齐？

疑而有惑，答而有解；一题多解，不足为奇；对症下药，病患无忧！块元素，有块元素的居中之方；行内元素，有行内元素的居中之道；特殊元素，自有特殊解法！看到这，大家还是一头雾水吧！没关系，那就来点有涵养的吧！具体写法，步步解读！点击《CSS实现水平垂直居中对齐》，就可柳暗花明又一村！对了，顺便透露一下，这里面《CSS实现水平垂直居中-其他方法》还有一些不一样的实现方式哦！啦啦啦~~~

网易NEC方法？

不知道大家有没有听说过网易NEC，不知道也没事，其实就是网易前端CSS开源项目代号而已！它提供了漂亮简单的样式解决方案，其中就有实现水平垂直居中对齐的方法哦！想要知道具体怎么实现，结构要如何？CSS又要如何？那就进入《CSS实现元素水平垂直居中-网易NEC方法》，探个究竟吧！

CSS3的calc方法？

虽然之前的文章都没有介绍有关CSS3的知识点，不过竟然说到了元素的水平垂直居中问题，那我就说说CSS3中calc方法。大家不要奇怪，没错，CSS中也是有方法存在的。那到底要如何使用calc方法呢？跟前面讲的方法又有什么不同呢？是优还是劣？会不会有什么兼容问题呢？了解具体详情，请点击《CSS实现水平垂直居中 - CSS3的calc方法》

致谢

很感谢电脑前的你，将这篇文章从头读完，我们希望能够为大家建立一个HTML5技术分享平台，欢迎进入“HTML5学堂”沟通交流~~~HTML5学堂~http://www.h5course.com~由多名热爱H5的讲师们组成的一个组织。致力于构建一个前端技术、HTML5知识的分享平台。