福叔 2020-02-16
1、如果是行内元素,只需在父元素设置 text-align: center; 即可。
2、块级元素,只需设置 margin: 0 auto; 即可。
如下元素结构:
<div id="wrap"> <div id="box">hello world</div> </div>
3、absolute + magin
定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。
缺点:要知道元素的宽度
#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 50%; margin-left: -50px; }
4、absolute + translate
跟上面方法差不多,用 transform: translateX(-50%); 代替 margin-left,这样就不需要知道元素的宽度了。
缺点:transform 的兼容性(ie10)
#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 50%; transform: translateX(-50%); }
5、absolute + margin auto
元素定位 left: 0; right: 0; margin: 0 auto; 即可。
#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 0; right: 0; margin: 0 auto; }
6、flex
弹性布局什么的最喜欢了。
缺点:flex 兼容性(ie11)
#wrap{ display: flex; justify-content: center; }
垂直居中跟水平居中有很多相似的方法。
1、如果是单行文本,设置 line-height 即可。
2、absolute + magin
定位位置为 top: 50%; 然后 margin-top: -50px; 向上偏移元素高度的一半。
缺点:要知道元素的高度
#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 50%; margin-top: -50px; }
3、absolute + translate
跟上面方法差不多,用 transform: translateY(-50%); 代替 margin-top,这样就不需要知道元素的高度了。
缺点:transform 的兼容性(ie10)
#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 50%; transform: translateY(-50%); }
4、absolute + margin auto
元素定位 top: 0; bottom: 0; margin: auto 0; 即可。
#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }
5、display: table-cell
在父元素设置 display: table-cell; 将普通元素变成 table 元素,再设置 vertical-align: middle; 垂直居中。
#wrap{ display: table-cell; vertical-align: middle; }
6、flex
缺点:flex 兼容性(ie11)
#wrap{ display: flex; align-items: center; }