【css基础】居中对齐｜8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

我们在学习 CSS 时，一定会遇到各种块元素和行内元素的居中对齐问题，但大部分的 CSS 基础教程都没有对居中对齐进行过系统的归纳总结，所以今天笔者就带大家一起来系统地归纳总结一下如何利用 CSS 使块元素和行内元素居中对齐。

基本架构

<div class="father">
  <div class="children"></div>
  <text>文字</text>
</div>

一、水平居中

1.1 块元素里面的块元素<div>居中

方法一：利用父元素的 padding 属性实现

.father{
  padding:0 30px; 
}

方法二：利用子元素的 margin 属性实现

.children{
  margin:0 auto; 
}

1.2 块元素里面的行内元素<text>居中

.father {
  text-align: center;
}

二、垂直居中

2.1 块元素里面的块元素<div>居中

2.1.1 利用父元素的 padding 属性实现

.father{
  padding:30px 0; 
}

2.1.2 利用子元素的 position 和 transform 来实现垂直居中。

.children{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

2.1.3利用父元素的 flex 布局实现

.father{
  display:flex;
  justify-content:center;
  align-tiems:center;
}

3.2. 块元素里面的行内元素<text>居中

3.2.1 利用表单元素（table）实现

.father{
  display:table
}
text{
  display:table-ceil;
  vertical-align:middle;
}

3.2.2 利用父元素行高（line-height）= 父元素的高度（height）

.father{
  width:100%;
  height:200px;
  line-height:200px;
}

总结

1. 对于块元素中的 块元素 的 水平居中，优先使用 margin:0 auto
2. 对于块元素中的 行内元素 的 水平居中，优先使用 text-align: center
3. 对于块元素中的 块元素 的 垂直居中，优先使用 display:flex
4. 对于块元素中的 行内元素 的 垂直居中，优先使用 line-height = height
5. 任何情况都请不要使用 display:table 来布局

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。