CSS文本和div居中方法

1.常用居中方法

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

• 行内元素：对父元素设置text-align:center;
• 定宽块状元素: 设置左右margin:auto;
• 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

垂直居中

• 单行文本垂直居中：设置父元素的height等于行高line-height;

 

        这是单行文本垂直居中
    
/*css代码*/
        #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

• 多行文本垂直居中：

1. 父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中。

/*css代码*/
        #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            padding: 20px 40px;
        }

2. 父级元素高度固定
   设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

• 块状元素：设置子元素position:fixed（absolute），然后设置margin:auto;

 

        

            利用绝对定位实现子div大小不固定垂直居中
        
          
    
//css
#outer{
  width: 600px;
  height: 600px;
  background: red;
  position: relative;
}
#middle{
  position: absolute;
  width: 200px;
  height: 200px;
  background: yellow;
  margin: auto;
  top: 0;left: 0;right: 0;bottom: 0;
}

通用方案: flex布局

给父元素设置{display: flex; align-items: center;}。

 

        

            利用绝对定位实现子div大小不固定垂直居中
        
          
    
//css
#outer{
  width: 600px;
  height: 600px;
  background: red;
  display: flex;
  align-items: center;
}
#middle{
  width: 200px;
  height: 200px;
  background: yellow;
  margin: auto; 
}