[CSS]之居中篇

一、垂直居中

1.内联元素

给内联元素的上下加上相等的padding。
HTML代码

<main>
    <a href="">我们</a>
    <a href="">是</a>
    <a href="">居中的</a>
</main>

CSS样式

main {
  border: 1px solid red;
  margin: 20px 0;
  padding: 50px;
}
main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}

效果图

内联元素垂直居中.png

2.块级元素中的文字垂直居中

将元素的line-height定为和元素的高度一致。
HTML代码

<main>
    <div>我是垂直居中的</div>
</main>

CSS样式

main {
  border: 1px solid red;
  margin: 20px 0;
}
main div {
  height: 200px;
  line-height: 200px;
  text-decoration: none;
  background: black;
  color: white;
}

效果图

块级元素中的文字垂直居中.png

3.高度确定的块级元素

使用绝对定位，top设置为50%，magrgin-top设置为负的高度的一半。
HTML代码

  <main>
    <div>定高的块级元素垂直居中</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  position: relative
}
main div {
  height: 100px;
  line-height: 100px;           /*使文字垂直居中*/
  position: absolute;
  top: 50%;
  margin-top: -50px;          /*值为高度100px的一半*/
  background: black;
  color: white;
}

效果图

定高的块级元素垂直居中.png

4.高度不确定的块级元素

方法一：使用绝对定位，top设置为50%，translateY设置为-50%。

HTML代码

  <main>
    <div>高度不确定的块级元素垂直居中</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  position: relative
}
main div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: black;
  color: white;
}

效果图

高度不定的块级元素垂直居中.png

方法二：使用flex布局。

HTML代码

<main>
    <div>高度不确定的块级元素垂直居中</div>
</main>

CSS样式

main {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid red;
}
main div {
  background: black;
  color: white;
}

二、水平垂直居中

1.高度不定的块级元素

使用绝对定位，top设置为50%，left设置为50%，translate(-50%, -50%)
HTML代码

  <main>
    <div>高度不定的块级元素水平垂直居中</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  position: relative
}
main div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: black;
  color: white;
}

效果图

高度不定的块级元素水平垂直居中.png

2.高度确定的块级元素

使用绝对定位，top设置为50%，left设置为50%，margin为负的元素宽高各自的一半。
HTML代码

  <main>
    <div>高度确定的块级元素水平垂直居中</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  position: relative;
}
main div {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  margin: -100px;        /*值为宽高200px的一半*/
  left: 50%;
  background: black;
  color: white;
}

效果图

高度确定的块级元素水平垂直居中.png

3.flex布局实现水平垂直居中

HTML代码

  <main>
    <div>felx布局</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
main div {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
}

4.grid布局实现水平垂直居中

HTML代码

  <main>
    <div>grid布局</div>
  </main>

CSS样式

main {
  height: 300px;
  border: 1px solid red;
  display: grid;
}
main div {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
  margin: auto;
}