水平垂直居中的12种方法

1.absolute + 负margin

<style>
.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    margin-top: -125px;  /* 设置为高度的一半 */
    margin-left: -125px; /* 设置为宽度的一半 */
    background-color: lightblue;
}
</style>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>

2. absolute + margin auto

<style>
.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    background-color: lightblue;
}
</style>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>

3. absolute + calc

<style>
.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: calc(50% - 125px);
    left: calc(50% - 125px);
    width: 250px;
    height: 250px;
    background-color: lightblue;
}
</style>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>

4.position + absolute 

<style>
.father {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightblue;
}
</style>
<body>
<div class="father">
    <div class="box">
        <img style="" src="">
    </div>
</div>
</body>

5. flex + justify-content + align-items

<style>
.father {
    display: flex;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    justify-content: center;
    align-items: center;
}
</style>
<body>
<div class="father">
    <div class="box">
        <img style="" src="">
    </div>
</div>
</body>

6.flex + margin auto

<style>
.father {
    display: flex;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    margin: auto;
}
</style>

7.grid 

<style>
.father {
    display: grid;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    justify-self: center;
    align-self: center;
}
</style>
<body>
<div class="father">
    <div class="box">
        <img style="" src="">
    </div>
</div>
</body>

8.行内块元素 + line-height 

<style>
.father {
    width: 500px;
    height: 500px;
    line-height: 500px;
    border: 1px solid #465468;
    text-align: center;
}
.box {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
}
</style>
<body>
<div class="father">
    <div class="box">
        <p>.....</p>
    </div>
</div>
</body>

9.行内块元素 + 辅助元素

<style>
.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
    font-size: 0px;
}
.box {
    display: inline-block;
    vertical-align: middle;
}
/* 辅助元素 */
.father::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
</style>
<body>
<div class="father">
    <div class="box">
        <img style="" src="">
    </div>
</div>
</body>

10.行内块元素 + css-table

<style>
.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
</style>
<body>
<div class="father">
    <div class="box">
        <img style="" src="">
    </div>
</div>
</body>

11. 行内块元素 + table 

<style>
.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
}
.box {
    display: inline-block;
}
</style>
<body>
<table>
    <tbody>
        <tr>
            <td class="father">
                <div class="box">
                    <img style="" src="">
                </div>
            </td>
        </tr>
    </tbody>
</table>
</body>

12.行内块元素 + writing-mode

<style>
.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
    writing-mode: vertical-lr;
    text-align: center;
}
.inner {
    display: inline-block;
    width: 100%;
    writing-mode: horizontal-tb;
    text-align: center;
}
.box {
    display: inline-block;
    margin: auto;
}
</style>
<body>
<div class="father">
    <div class="inner">
        <div class="box">
            <img style="" src="">
        </div>
    </div>
</div>
</body>

 

posted @ 2022-07-18 09:59  前端小白银  阅读(180)  评论(0)    收藏  举报