扒一扒 margin：auto
2017-05-07 本文已影响0人
默默鱼小海
margin 是什么？
- CSS 的box model中一个重要属性就是margin，是元素距离容器的距离，看图复习一下
margin：auto; 怎么用
- 可以将元素居中
- 原理是：
The element will take up the specified width, and the remaining space will be split equally between the two margins
实验出真理
- 将一个h1元素，设置为margin：auto; 看是否会居中呢？猜猜看
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin: auto;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
结果是：
没有居中，这是什么鬼，说好的居中呢？我们将border显示出来看一下
机智的小伙伴可以看出来了，元素h1其实已经居中了，h1元素不是只有文字那么长，而是占了一整行，占满了当然居中了。文字存在于元素中，文字的居中是text-align的事了。
为了验证我们想法，width设置为固定长度500px。
you see， 红色的框框也就是h1元素居中了。
实验二
- 将一个span 设置margin：auto; 这次我们给它先设置了width
<!DOCTYPE html>
<html>
<head>
<style>
span{
margin: auto;
width: 500px;
}
</style>
</head>
<body>
<span>Margin testing</span>
</body>
</html>
然而，
并没有居中，而且发现这个宽度不像是500px啊
是的，width没有起作用，因为span就不是可以设置宽度的元素啊，故意挖坑是吧！这就是block 和inline元素的区别。
block 元素：通常另起一行，可以设置width和height，默认width是100%
inline元素：通常不会另起一行，元素的宽高由内容撑大，设置width无效
BUT，block 和 inline 是可以转化的，设置display：block; display: inline; 即可
所以为span加上display：block，让我的width设置生效。
果然，蓝色框框也就是我们的span元素就居中啦。
一句话总结
- 元素必须有有效的width，才可以使用margin：auto;来使元素居中
对于block元素，要设置固定大小的width, 默认width是100%看不出来居中效果
对于inline元素，先display：block; 再设置固定大小的width
PS.
- 想要文字居中用 text-align: center; 就可以啦，区分开文字在元素中居中，和元素在容器中居中哦！
