CSS居中的方案

CSS完全可以居中任何你想居中的东西。

水平

• 内联元素(inline-* elements or inline) 例如文字，链接等 ：
  可以通过text-align属性直接将内联元素水平居中。

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

• 块级元素 :
  块级元素才有盒子模型，所以我们考虑控制元素的<b>margin-left</b>和<b>margin-right</b>来使元素水平居中。

.center-me {
    margin: 0 auto;
}

• 多个块级元素 :
  如果你想在一行里居中多个块级元素，有两种方案:

1. 设置为inline-block，然后父级元素直接设置<b>text-align</b>属性。

/*html:*/
<div class="big_box">
    <div></div>
    <div></div>
</div>

/*css:*/
.big_box {
    text-align:center;
}
.big_box div {
    display:inline-block;
    text-align:left;
}

2. 用flex布局来实现。

/*css*/
.big_box {
    display:flex;
    justify-content: center;
}

Paste_Image.png

---

垂直

垂直居中比较棘手

• 内联元素

1. 元素只有一行，那么可以通过设置<b>padding-top</b>和<b>padding-bottom</b>相等，那么文本就居中啦。
   但有时候不能设置padding，那么可以通过<b>line-height</b>来使单行元素看起来垂直居中，但这只是看起来，只有单行时可以使用。
2. 多行的情况下，还是通过相等的垂直方向的padding，但如果设置了以后效果不佳的话，可以通过将元素以table的形式显示，table中的td默认是垂直居中的。(比较out的做法)

.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;
}

Paste_Image.png

比较新潮一点的做法是用flexbox
一个flex元素可以很容易地在flex父级元素中垂直居中：

.flex-center-vertically {
    display: flex;
    justify-content:center;
    flex-direction: column;
    height:400px;
}

如果父容器有一个固定的高（就是不随着内容的大小变化，是固定的px或者%）那么我们可以用幽灵元素ghost element技术。

在父元素中设置一个全高（100%）的伪元素，而我们要居中的元素以它为基准。

.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%；
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align:middle;
    width: 190px;
    margin: 0;
    padding: 20px;
    background: black;
}

• 块级元素

1. 固定高度的元素：
   当高度确定时，我们可以用以下方式来垂直居中它：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height:100px;
    margin-top:-50px;
}

2. 如果不是固定高度的：
   那么就通过

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

和上面一样，还有个更简单，更新潮的方法，就是使用flexbox

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

水平与垂直

可以手动组合上面的方法，但综合来说用以下方案。

1. 确定高度和宽度
   一个兼容性比较好的解决方案是：

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;

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

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

2. 高度和宽度不确定
   倘若不确定高度和宽度，那么我们就用<b>transform</b>属性，和一个负50%的translate 。

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

对，没错，用flexbox肯定更简单，谁让它就是用来解决布局问题的呢。

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}