CSS常用布局实现03-水平垂直居中 CSS常用布局实现03-水平垂直居

1. 简介其实，水平居中和垂直居中都是水平垂直居中的一部分，所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中，那么居中的元素肯定是有宽度和高度的，要么是指定宽高，要么就是自适应的宽高。
2. 已知宽高这种情况比较简单，因为已知宽高，根据宽高就能做很多处理。这里我只记录一种方法。
使用 -margin + absolute（relative）：

负margin + absolute - 锐客网* { margin: 0; padding: 0; } .wrap { position: relative; background: gray; height: 300px; } .inner { background: blue; width: 200px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; }inner content

文章图片
image.png
当然，这里使用这个方法的简化方法也可以，就是不设置父元素为absolute，设置子元素为relative，其余保持一样。
3. 未知宽高 3.1 使用 -margin + absolute：

负margin + absolute - 锐客网* { margin: 0; padding: 0; } .wrap { position: relative; background: gray; height: 300px; } .inner { background: blue; width: 200px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto; }inner content

文章图片

这种方法很巧妙，使用也很多。IE7及之前版本不支持。
3.2 flex
是的，flex，flex，flex。

flex - 锐客网* { margin: 0; padding: 0; } .wrap { background: gray; display: flex; height: 60px; align-items: center; justify-content: center; } .inner { background: blue; }inner content

文章图片
3.3 grid
还有grid，grid，grid。

grid - 锐客网* { margin: 0; padding: 0; } .wrap { background: gray; display: grid; height: 60px; align-items: center; justify-content: center; } .inner { background: blue; }inner content

文章图片
3.4 table
当然，这种情景使用table也很方便。

table - 锐客网* { margin: 0; padding: 0; } .wrap { display: table-cell; background: gray; height: 100px; width: 300px; text-align: center; vertical-align: middle; } .inner { background: blue; }inner content

【CSS常用布局实现03-水平垂直居中】ie8以后兼容。