让元素居中的几种方法

一、让元素水平居中

1.想要一个块级元素在其包含元素内居中，可以将此块级元素的左、右外边距的值设为auto。

html代码：

  
  
  


  

    

      This is a paragraph with a fixed width,
      and left and right margins set to auto,
      So it's centered.
    
  

CSS代码：

.box1 {
  background-color:pink;
  width:400px;
  height:100px;
}

.box2 {
  background-color:green;
  width:300px;
  height:50px;
  margin-left:auto;
  margin-right:auto;
}

Output:

output1.png

2.想要一个inline元素、或inline-block元素在其包含元素内居中，可以将其被包含元素设置为 text-align:center。

html代码：

  
  
  


  

    

      This is a paragraph with a fixed width,
      and left and right margins set to auto,
      So it's centered.

    
    
  想了解更多请点击。
    
  

CSS代码：

.box1 {
  background-color:pink;
  width:500px;
  height:200px;
}

.box2 {
  background-color:green;
  width:450px;
  height:80px;
  margin-left:auto;
  margin-right:auto;
}

.box3 {
  width:400px;
  background-color:blue;
  height:80px;
  text-align:center;
}

a {
  background-color:yellow; 
}

Output:

output2.png

二、让元素垂直居中

在transform: translateY的帮助下我们可以使用三行CSS代码让任何甚至不知道高度的元素垂直居中。CSS的transform属性常用来旋转和缩放元素，现在我们可以使用它的translateY函数垂直对齐元素。
垂直居中通常的做法是使用绝对定位或者设置行高，但是这两种方案的弊端是要么需要你知道元素的高度，要么只能作用于单行文本（注：inline或者inline-block元素）。

代码如下：

.element { 
   position: relative; 
   top: 50%; 
   transform: translateY(-50%); 
}