css实现各种居中

作者: iamswf | 来源:发表于2018-12-02 20:02 被阅读0次

css实现各种居中
css居中各种实现
CSS各种居中实现方式
CSS 居中的各种方案
CSS水平居中与垂直居中的总结
CSS常用布局实现
CSS解决盒模型居中的问题
CSS各种居中
css flex知识点
垂直水平居中

我们使用css过程中会碰到各种居中的需求，比如水平居中、垂直居中、水平、垂直同时居中，而且同时会有各种各样的前提条件，比如待居中元素高度已知、待居中元素高度未知、容器元素高度已知、容器元素高度未知等，现在总结下在各种前提条件下如何实现元素居中。注意，我们一般所说的居中是指的某个元素在包含块内的居中。

水平居中

行内元素水平居中

行内元素（包括行内块级元素（inline-block））水平居中很简单，使用text-align: center即可实现：

<div class="centered-text">
  inline elements horizontally center
</div>

<div class="centered-text">
  <a href="#0">One</a>
  <a href="#0">Two</a>
  <a href="#0">Three</a>
  <a href="#0">Four</a>
</div>

body {
  background-color: #f06d06;
  margin: 0;
}
div.centered-text {
  background-color: #fff;
  text-align: center;
  margin-top: 30px;
  padding: 10px 0;
}

div.centered-text a {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
}

实现效果如下：

行内元素水平居中

块级元素水平居中

块级元素水平居中实现起来也很简单，只需要将margin-left以及margin-right设置为auto即可。不过有个前提条件就是需要设置witdh为一定宽度，否则块级元素默认宽度会占满整个包含块，这时居中也就无从谈起了。块级元素水平居中实现如下：

<div class="container">
  <div class="center">
    I'm swf, I'm from China.
  </div>
</div>

body {
  margin: 0;
  background-color: #f06d06;
}

div.container {
  background-color: #000;
  margin-top: 20px;
}

div.center {
  width: 100px;
  height: 50px;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}

实现效果如下：

块级元素水平居中

垂直居中

行内元素垂直居中

如果包含块是自然的被行内元素的高度撑开的，那么可以简单的设置包含块的padding-top和padding-bottom相等来实现垂直居中，其他情况可以采用如下方式实现：

单行行内元素垂直居中
单行行内元素垂直居中实现起来比较简单，只需将包含块的height和line-height属性设置为相同值即可：

<div>
  <a href="#0">We're</a>
  <a href="#0">Centered</a>
  <a href="#0">Bits of</a>
  <a href="#0">Text</a>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div {
  border: 1px solid #fff;
  background-color: #000;
  height: 100px;
  line-height: 100px;
  margin-top: 20px;
}

a {
  text-decoration: none;
  background-color: #fff;
  color: #000;
}

实现效果如下：

单行行内元素垂直居中

多行行内元素垂直居中
多行行内元素垂直居中的实现方案可以利用table布局实现，该方法需要在将包含块多包一层：

<div class="center-table">
  <p>
    <span>based on table layout.</span>
    <br />
    <span>based on table layout.</span>
  </p>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div {
  margin-top: 20px;
  display: table;
  width: 100%;
}

p {
  background-color: #000;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
}

p span {
  background-color: #fff;
}

实现效果如下：

多行行内元素垂直居中

块级元素垂直居中

如果块级元素的包含块不作高度限制，可以简单的通过将padding-top与padding-bottom（或margin）设置为相等来实现块级元素的垂直居中；如果块级元素的包含块高度已限制为确定值，那么可以采用如下方式实现，注意无论待垂直定位元素的高度是否已知这些方法均适用。

基于position实现
将包含块设置为position: relative，待垂直居中的块级元素设置为position: absolute，然后相对于包含块来调整块级元素垂直方向位置：

<div class="container">
  <div class="block-box">
     I'm a block-level element with an known or unknown height, centered vertically within my parent.
  </div>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div.container {
  height: 100px;
  background-color: #000;
  margin-top: 20px;
  position: relative;
}

div.block-box {
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

实现效果如下：

块级元素垂直居中

基于flexbox实现
纵向进行flexbox布局即可：

<div class="container">
  <div class="block-box">
     I'm a block-level element with an known or unknown height, centered vertically within my parent.
  </div>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div.container {
  height: 100px;
  background-color: #000;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.block-box {
  background-color: #fff;
}

实现效果与基于position实现相同。

块级元素水平、垂直同时居中

如果要求块级元素同时实现水平、垂直居中，可采用与前面垂直居中相同的思路来实现。当然，我们需要限制下元素的宽度，否则水平居中就无从谈起。注意无论元素的高度是否已知这些方法均适用。

基于position实现

<div class="container">
  <div class="block-box">
     I'm a block-level element with an known or unknown height, centered vertically within my parent.
  </div>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div.container {
  height: 100px;
  background-color: #000;
  margin-top: 20px;
  position: relative;
}

div.block-box {
  background-color: #fff;
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

实现效果如下：

块级元素水平、垂直同时居中

基于flexbox实现

<div class="container">
  <div class="block-box">
     I'm a block-level element with an known or unknown height, centered vertically within my parent.
  </div>
</div>

body {
  background-color: #df6d0f;
  margin: 0;
}

div.container {
  height: 100px;
  background-color: #000;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.block-box {
  background-color: #fff;
  width: 300px;
}

实现效果与基于position实现相同。