css居中处理

 

1.水平居中
如果只是单行包含文本内容的组件可以使用text-align:center;通过文本内容居中影响元素居中。适用于内联元素。
注意：text-aligin:center需设置在父容器上，子元素必须包含文本内容，且是内联元素。

 

例如:

<div style="text-align:center">
    <span>测试<span>
</div>

如果是没有文本内容的元素，或者块级元素水平居中，可使用margin:0 auto;

注意：使用时需先设置块级元素的宽度，否则不会生效。
例如：

<div>
    <div style="width:300px;backgorund-color:red;height:100px;margin:0 auto;"><div>
</div>

如果元素是内联元素，且包含的内容不全是文本的情况则需要用到:transform:translateX(50%)。

  position: fixed;
  top: 50px;
  max-width: 400px;
  width: 500px;
  background: #ffffff;
  padding: 15px;
  margin: 0 auto;
  border: 1px solid #f9dfdf;
  border-radius: 5px;
  left: 50%;                                    //向左偏移50%
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  width: auto;
  transform: translateX(-50%);                 //相对应自身向右偏移自身的50%

 

2.垂直居中

如果只是一行内容的话，垂直居中可以直接使用line-height属性来设置。

注意：line-height设置在父容器上，且line-height的值应该与父容器的height相等。
例如：

<div style="line-height:30px;height:30px">
    <a>测试<a>
</div>

 

如果有多行内容，垂直居中需要使用position属性设置。

.div-center{
	width:350px;
    	padding: 10px;
    	position: absolute;
    	top: 50%;
    	right: 100px;
       	margin-top: -185px;	//元素宽度350/2+上下padding/2 = 185
    //  transform: translateY(-50%);  //如果元素高度不确定就是用该属性而不用margin-top
}

或者

.div-center{
    width:350px;
    padding: 10px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

 

3.flex实现居中

.div-center{    
     display: flex;
     justify-content: center;
     align-items: center;
}

 

效果：

 

 

如果是纯文本内容，也可以使用表格的垂直居中属性来实现居中。

 

<div class="test">
  <div class="test-center">
	line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高
	[注意]如果块级元素中的某一个子级内联元素设置的行高比最小行高大，则行框以设置行高来渲染；如果小，则以最小行高来渲染。因为，每一个子级内联元素的行高都是行内框的高度，只有一行中所有的行内元素(包括代表父级元素的匿名文本)，最大的行内框高度才能成为整行的行高。下面会有详细解释
  </div>
</div>

 

.test{
      display: table;
      vertical-align: middle;
      padding:10px;
}
.test-center{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
}

效果如下：