CSS垂直居中

文字垂直水平居中

• 第一种： line-height

//html---------------------------------------------------------

      <p>abc</p>

//css----------------------------------------------------------
      p {
        width: 100px;
        height: 100px;
        background-color: red;
        line-height: 100px;   //垂直居中
        text-align: center;   //水平居中
      }

• 第二种：padding （单行多行都可以）

//html---------------------------------------------------------

<p>abaaaaaaaaaaaaaaaaa aaaaaaaaacacca asdsadsada asdas asdas</p>

//css----------------------------------------------------------
      p {
        widows: 40px;
        height: auto;
        background-color: red;
        padding: 20px 0;
        text-align: center;
      }

• 第三种：table-cell （单行多行都可以）

//html---------------------------------------------------------

    <div id="a">
      <p>abaaaaaaaaaaaa aaaaaaaaacacca asdsadsada asdas</p>
    </div>

//css----------------------------------------------------------
     #a {
        display: table;
        width: 200px;
        height: 100px;
        background-color: red;
      }
      p {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
      }

块元素水平垂直居中

• flex布局（文字也可）

//html---------------------------------------------------------

<div class="box">
    <div class="content">
    </div>
</div>

//css----------------------------------------------------------
.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

• transoform+position

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

• margin负值+position

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

• inline-block（文字也可）

<div class="p_box bg_box">
	<p class="words_p">
		aa aaaaaaaasad sdasdasdddddddddasdsa asasaasdas ddd aaaaaaaaaaa
	</p>
</div>

      .bg_box {
        width: 300px;
        height: 300px;
        margin-top: 20px;
        background-color: #bbbbbb;
      }
      .p_box {
        line-height: 300px;
        text-align：center;
      }
      .words_p {
        display: inline-block;
        line-height: 20px; /*单独给子元素设置行高，覆盖父级元素的行高*/
        vertical-align: middle; /*基线居中对齐*/
      }