1.元素水平居中
1.1 在父元素上使用text-align: center;
father { text-align: center; }
1.2 margin: 0 auto;
在上一个问题中，我们说过，块级元素的特性是自动在宽度上填充父元素，有内容的地方自然是内容，而其余的地方使用margin填充。因此我们可以利用左右相等的margin来使元素居中。
<style type="text/css"> #container { height: 100px; background: gray; } #testDiv1{ height: 100px; margin: 0 auto; width: 100px; background: black; } </style> <body> <div id="container"> <div id="testDiv1"></div> </div> </body>
1.3 多个块级元素在一行内居中
众所周知，行级元素不能设置宽高，只能根据内容决定大小，那么想让多个块级矩形居中要怎么做呢？
块级元素独占一行，要怎么才能不独占呢？
可以设置成行内块级 inline-block，然后父元素给text-align：center
<style type="text/css"> #container { text-align: center; height: 100px; background: gray; } .mydiv { display: inline-block; width: 100px; height: 100px; background: red; } </style> <body> <div id="container"> <div class="mydiv"></div> <div class="mydiv"></div> <div class="mydiv"></div> </div> </body>
1.4 设置距离左边50%，再用负margin拉回去
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.垂直居中
2.1 单行行内元素居中
思路：设置display为inline-block，并给出行高等于元素高度
<head> <style> div { width: 200px; height: 200px; background: rgb(30, 186, 250); } /*设置父块大小及颜色*/ div a { text-decoration: none; font-size: 25px; color: rgb(254, 7, 183); font-weight: 700; line-height: 200px; } /*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/ </style> </head> <body> <div><a href="#">测试链接</a></div> </body>
2.2 设置距离父元素50%，再用margin拉回去
<!DOCTYPE html> <html lang="zh"> <head> <style> *{ margin: 0; padding: 0; } body { height: 95vh; } .test{ height: 100px; width: 100px; background: red; position: absolute; top: 50%; margin-top: -50px; } </style> </head> <body> <div style="height: 600px"> <div class="test"> </div> </div> </body> </html>
若想基于视口的垂直居中可将relative换为absolute
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.3 table-cell + vertical-align:middle
设置父元素display为table-cell，并给vertical-align: middle;
3 我最喜欢的方法，flex布局天下第一！
总结：垂直 + 水平居中示例
需求，在页面最中间显示一个button。
<!DOCTYPE html> <html lang="zh"> <head> <style> body { height: 100vh; margin: 0; padding: 0; text-align: center; } /* button { } */ span { display: inline-block; height: 100vh; line-height: 100vh; } a { text-decoration: none; padding: 10px 20px; border-radius: 5%; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); } </style> </head> <body> <span> <a href="">click me</a> </span> </body> </html>
效果：
或者用 flex布局一键解决！