CSS元素居中问题

块级元素

水平居中：

1. 自己设一个宽度并且给自己设 margin:auto，或者单独设置左右margin为auto。

   注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

.center {
  margin: auto;
  width: 50%;
}

2. 如果是多个块级元素想要居中，先把他们变成行内块元素，再把它们的父元素的text-align设为center。
3. 定位加上transform。

.parent
	{
        position: relative;
        width: 500px;
        height: 500px;
    }
.child
	{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: red;
    }

4. 父元素使用flex布局，方向为row，justify-content设置为center。

垂直居中

1. 父元素flex布局，设置align-item: center。
2. 父元素flex布局，子元素设置align-self: center。
3. 子元素绝对定位加上top: 50%; transform: translateY(-50%);
4. 子元素绝对定位，top，bottom设为0， margin设为auto。

.center {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
}

4. 直接设置子元素的padding上下相等，父元素会被子元素撑开。