總結(jié): CSS的居中操作

CSS居中算是一個比較基礎的問題契讲，在實際運用中，需要考慮到的一般是兩種情況
- 一種是主要是表現(xiàn)為文字档玻，圖片等行內(nèi)元素的居中
- 一種是指 div 等塊級標簽元素的居中

文字圖片的居中

text-align: center

<div class="center">
  <span class="center_text">123</span>
</div>

.center{
  text-align:center;
}
center_text{
  display:inline-block;
  width:500px
}

這種方式是在父元素中添加text-align:center時怀泊，直接子元素如果是inline或inline-block，那么子元素在父元素中居中

margin: 0 auto

<div class="center">
  <span class="center_text">
    塊級元素 + 設置高度 + margin: 0 auto;
 </span>
</div>

.center_text {
  display: block;
  width: 500px;
  margin: 0 auto;
}

這種對齊方式要求內(nèi)部元素.content_text是塊級元素误趴，并且不能脫離文檔流（如設置position:absolute）霹琼，否則無效。

塊級標簽元素的居中

脫離文檔流的居中方式

<div class="mask">
　<div class="content">我是要居中的板塊凉当，</div>
</div>

.mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
}

.content {
  display: block;
  position: fixed;
  width: 666px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -333px;
  margin-top: -200px;
  /* transform: translate(-50%, -50%); */
  z-index: 2;
  background-color: #fff;
}

把內(nèi)部div設置寬高之后枣申，再設置top、left各為50%看杭，設置完之后忠藤，這里是按照左端居中的，接著我們使用負邊距的方式調(diào)整楼雹，將margin-top設置為負的高度的一半模孩，margin-left設置為負的寬度的一半，就可以居中了贮缅。也可以用 transform: translate(-50%, -50%); 替代margin-top榨咐、margin-left，直接一步到位

使用css3計算的方式居中元素calc

<div class="mask">
　<div class="content">我是要居中的板塊谴供，</div>
</div>

.mask {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 1px solid #ccc;
}

.content {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 150px);
  width: 300px;
  height: 100px;
  border: 1px solid #000;
}

這種方式同樣是將脫離文檔流的元素块茁，然后使用計算的方式來設置top和left；

??今天是10月1號桂肌，國慶節(jié)数焊，我起了個大早，忘記了今天不上班崎场，剛剛?cè)タ戳撕寐曇襞宥娌诲e，出門剪了個不漂亮的發(fā)型?? 谭跨，還吃了炸雞蚕愤，然后，然后就上火長痘痘了饺蚊，ε=(′ο｀*)))唉，.最后祝大家國慶快樂悬嗓，祝我們祖國越來越強大 ??!!!

<font size="2">最后更新于 2021-10-1</font>

最后編輯于：2023.02.06 21:06:53

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者