div button垂直居中_CSS布局-垂直居中-CSDN博客

水平居中比较简单，对于行内元素，对其父元素配置text-align:center；对于块级元素，对其自身应用margin:auto。

而垂直居中相对则比较麻烦，可以有三种解决方案

绝对定位居中

绝对定位居中要求元素具有固定的宽度和高度，并且如果元素超过了视口，超过视口的部分会被裁剪掉！

export

视口移位居中

仅适用于视口居中！

export default() => {
    return (
        <div className={"container"}>
            <div className={"component"}>
                Hello Friends!
                <br/>
                朋友们,你们好呀!
            </div>
        </div>
    )
};

.component {
  text-align: center;
  margin    : 50vh auto 0;
  transform : translateY(-50%);
}

Flexbox居中

借助flexbox和margin:auto，不仅可以在水平方向上居中，还可以在垂直方向上居中

export default() => {
    return (
        <div className={"container"}>
            <div className={"component"}>
                Hello Friends!
                <br/>
                朋友们,你们好呀!
            </div>
        </div>
    )
};

.container {
  display: flex;
}

.component {
  margin: 100px auto;
}

借助flexbox的align-items和justify-content

export default() => {
    return (
        <div className={"container"}>
            Hello Friends!
            <br/>
            朋友们,你们好呀!
        </div>
    )
};

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