css《水平居中》

水平居中

• 方式一：使用 行内元素
• 方式二：使用 margin
• 方式三：使用 position
• 方式四：使用 伪元素

<div class="wrap">
    <div class="center">Test</div>
</div>

/*方式一：*/
.wrap {
     text-align: center;
 }
 .center {
     width: 200px;
     display: inline;
     background-color: yellow;
 }

/*方式二：*/
.center {
     width: 100px;
     margin: 0 auto;
     background-color: goldenrod;
 }

/*方式三：*/
.wrap {
     position: relative;
 }
 .center {
     position: absolute;
     left: 50%;
     transform: translateX(-50%)
 }

/*方式四：*/
.wrap::before {
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
}
.wrap {
      text-align: center;
}
.center {
      display: inline-block;  
      vertical-align: middle;
}