第六届字节跳动青训营第一课CSS居中方法总结 ｜ 豆包MarsCode AI 刷题

一、行内元素

（1）水平居中

   1.通过text-align:center

<div class="parent" >
  <span class="child">我是行内元素</span>
</div>
.parent {
    background-color: red;
    text-align: center;
 }

 2.通过fit-content

给父元素的宽度加上width: fit-content;让父元素的宽度适应子元素的宽度

<div class="parent" >
   <span class="child">我是行内元素</span>
</div>

.parent {
        background-color: red;
        width: fit-content;
 }

然后给父元素加上margin: auto;实现居中

（2）垂直居中

1.line-height(只针对单行文本)

<div class="parent" >
    <span class="child">我是行内元素</span>
</div>
.parent {
        background-color: red;
        height: 200px;
        
}

然后加入line-height: 200px;

.parent {
        background-color: red;
        height: 200px;
        line-height: 200px;
}

二、块级元素

（1）水平居中

1.通过margin:0 auto;

<div class="parent">
    <div class="child">我是块级元素</div>
</div> 

.parent {
        background-color: red;
}
.child {
        width: 100px;
        background-color: blue;
}

然后给子元素加入margin:0 auto;

.parent {
        background-color: red;
}
.child {
        width: 100px;
        background-color: blue;
        margin: 0 auto;
}

（2）水平垂直居中

1.定位

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;

}

然后给子元素加入 left: 50%; top: 50%;margin-top: -50px; margin-left: -50px;

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

2.定位+transform

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;

}

然后给子元素加入left: 50%;top: 50%;transform: translate(-50%, -50%);

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  position: absolute;
  background: blue;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.定位 + margin

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;

}

然后加入left: 0;top: 0;right: 0;bottom: 0;margin: auto;

.parent {
  position: relative;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: blue;
}

4.Padding

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  background-color: red;
}
.child {
  width: 200px;
  background: blue;

}

然后给父元素加入padding: 20px;

.parent {
  padding: 20px;
  background-color: red;
}
.child {
  height: 200px;
  background: blue;
}

5.flex

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  background-color: blue;
}

6. 伪元素

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  height: 200px;
  text-align: center;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
  background-color: blue;
}
.parent::before {
  content: "";
  width: 20px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
}

7.calc(宽高相等)

<div class="parent">
   <div class="child">我是块级元素</div>
</div>

.parent {
  width: 600px;
  height: 600px;
  background-color: red;
}
.child {
  width: 100px;
  height: 100px;
  padding: calc((100% - 100px) / 2);
  background-clip: content-box;
  background-color: blue;
}