跳到主要内容

块级元素垂直居中

2023年02月19日
柏拉文
越努力，越幸运

一、宽高固定​

1.1 absolute + margin​

场景背景: 通过 absolute、margin 实现水平垂直居中布局

场景解决: 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        position: "relative"
    }
    const itemStyle = {
        width: "100px",
        height: "100px",
        position: "absolute",
        left: "50%",
        top: "50%",
        marginLeft: "-50px",
        marginTop: "-50px",
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }></div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目需要指定宽高，不可以根据内容自适应居中

1.2 absolute + calc​

场景背景: 通过 absolute、calc 实现水平垂直居中布局

场景解决: 通过 left: calc(50% - 元素宽度/2); top: calc(50% - 元素宽度/2); 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        position: "relative"
    }
    const itemStyle = {
        width: "100px",
        height: "100px",
        position: "absolute",
        left: "calc(50% - 50px)",
        top: "calc(50% - 50px)",
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }></div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目需要指定宽高，不可以根据内容自适应居中

1.3 absolute + left + right + top + bottom + margin:auto​

场景背景: 通过 absolute + left + right + top + bottom + margin:auto 实现水平垂直居中布局

场景解决: 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        position: "relative"
    }
    const itemStyle = {
        width: "100px",
        height: "100px",
        position: "absolute",
        left: "0",
        top: "0",
        right: "0",
        bottom: "0",
        margin: "auto",
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }></div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目需要指定宽高，不可以根据内容自适应居中

二、宽高不定​

2.1 Flex 布局​

场景背景: 通过 flex 实现水平垂直居中布局

场景解决: 通过 justify-content: center; align-items: center 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'flex',
        justifyContent: "center",
        alignItems: "center"
    }
    const itemStyle = {
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中

2.2 Gird 布局​

场景背景: 通过 grid 实现水平垂直居中布局

场景解决: 通过 justify-items: center; align-items: center 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        justifyItems: "center",
        alignItems: "center"
    }
    const itemStyle = {
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中

2.3 Table 布局​

场景背景: 通过 table 实现水平垂直居中布局

场景解决: 通过 text-align: center; vertical-align: middle; 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'table-cell',
        textAlign: "center",
        verticalAlign: "middle"
    }
    const itemStyle = {
        display: "inline-block",
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中

2.4 Transform 布局​

场景背景: 通过 transform 实现水平垂直居中布局

场景解决: 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        position: "relative"
    }
    const itemStyle = {
        position: "absolute",
        top: "50%",
        left: "50%",
        backgroundColor: "yellow",
        transform: "translate(-50%,-50%)",
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中