翻译 CSS如何水平居中-垂直居中

翻译 如何居中

对这篇文章的翻译https://css-tricks.com/centering-css-complete-guide/

水平居中

内联元素？文字或者链接?

在块级元素内你可以将内联元素水平居中通过：

.center-children {
  text-align: center;
}

这些在inline, inline-block, inline-table, inline-flex中起作用

块级元素居中

对于块级元素你可以设置 margin-left 和 margin-right为auto(注意要有宽度，没有宽度的话会占满全部空间)一般用法为:

.center-me {
  margin: 0 auto;
}

对于父节点和本身来说宽度没有要求。
如果是float居中一种方案就是使用绝对定位之后left:50%然后再用margin:-图片的宽度的一半将其拉回。

<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            width: auto;height: 100px;background-color: orange;
        }
        img{
            width: 200px;
            height: 100px;
            position: absolute;left: 50%;margin-left: -100px;
        }
    </style>
</head>
<body>
<div style="">
    <img src="3.png" style="" width="200" height="100">
</div>
</body>
</html>

多个块级元素?

如果您有两个或更多的块级元素需要在一行中水平居中，那么您可能会更好地使其成为不同的显示类型。
以下是使它们成为内联块的示例以及flexbox的示例：

/*内联居中 */
.inline-block-center {
    text-align: center;
}
/* flex居中 */
.flex-center {
    display: flex;
    justify-content: center;
}

假设你还有多个块级元素从上向下叠加，那么使用margin技术居中也是可以的。

垂直居中

内联元素?

一行?

有时候一行元素可以垂直居中，因为他们的上下padding一样。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果padding不是选项，并且这个文字不会换行，那么您可以考虑一下line-height和高度相等。

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行？

在多行情况下，上下相等padding也可以实现居中效果。但是如果他不奏效那么有可能是因为他是一个table-cell元素或者是被拆开仿佛像一个但是不是。vertical-align可以起到作用不像原有的效果他可以处理一列上的居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
</style>
</head>
<body>
<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</body>
</html>

如果出现了需要类似表格的布局那么，flexbox更好。

.container{
            width: 300px;
            height: 200px;
            display: flex;
            background-color: #C2FF21;
            justify-content:  space-around;
            align-items: center;
        }
.item{
            width: 20px;
            height: 20px;
            background-color: #0067FF;
}

注意以上在有给定高度的时候管用。如果以上方法都不奏效那么请在里面加一个给定元素然后对它居中。

块级元素

是否知道宽高

不知道网页布局的高度是很常见的，原因很多：如果宽度改变，文本重排可以改变高度。 文字造型的差异可以改变高度。 文字数量的变化可以改变高度。 具有固定宽高比的元素（如图像）可在更改大小时更改高度。 等等。
但是如果知道高度可以这样居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

如果不知道高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flexbox

水平垂直居中

给定宽高？

那么使用left,top 50%之后之后使用负的margin将其拉回即可。

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

如果宽高不给定

如果宽高不给定那么使用 transform: translate(-50%, -50%);注意这个的外元素也要有高度

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

flexbox