CSS实现元素居中样式（水平居中和垂直居中）

水平居中

1.text-align:center;

此用法需要满足：父元素为块级元素（block）

可以实现块级元素内样式居中，子元素可以为：inline-block，inline，inline-flex

 

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
24 
25 
26     
class="main">    
27     
class="box1">
28     
class="box2">
29     
30 
31 

 

2.margin:0 auto;

设置要求：块级元素（block）

 

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
25 
26 
27     
class="main">    
28     
class="box1">
29     
class="box2">
30     
31 
32 

 

 

 

 

 

3.利用弹性布局实现居中

通过弹性布局设置主轴的对齐方式（justify-content: center;）实现

 

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
24 
25 
26     
class="main">    
27     
class="box1">box1
28     
class="box2">box2
29     
30 
31 

 

 

 

 

 

垂直居中

1.容器height与line-height高度一致

对于内容的居中实现较为简单，但不能对于整个元素标签进行居中

 

 

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
20 
21 
22     
class="main">    
23     
class="box1">文本内容垂直居中
24     
25 
26 

 

 

如图对于文本内容实现居中，但承载内容的上一级标签并不能实现垂直居中

 

3.利用flex布局实现

原理同利用flex实现水平居中相同，只需更改主轴方向即可

 

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6     
22 
23 
24     
class="main">    
25     
class="box1">box1
26     
27 
28 

 

 

 

4.利用margin和transform实现

利用margin-top或者margin-bottom将元素移动50%；

然后通过transform在y轴进行2d移动元素高度的一半即可