前端修炼基础篇--不固定宽高垂直水平居中-CSDN博客

不固定宽高垂直水平居中

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: #cccccc;
        display: table;
        overflow: hidden;

    }

    .son {
        vertical-align: middle;
        display: table-cell;
        text-align: center;

    }

    .center {
        width: 100px;
        height: 100px;
        background-color: #888;
        display: inline-block;

    }
</style>

<body>
<div class="box">
    <div class="son">
        <div class="center">ssssssssssss</div>
    </div>
</div>


</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .big {
        width: 500px;
        height: 400px;
        background: #000;
        margin-left: 50px;
        position: relative;
    }

    .small {
        width: 150px;
        height: 100px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -75px;
    }
</style>

<body>

<div class="big">
    <div class="small">5555555</div>
</div>

</body>
</html>

方法三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .big {
        width: 500px;
        height: 400px;
        border: 1px solid red;
        text-align: center;
    }
    span {
        display: inline-block;
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }
    .small {
        width: 150px;
        height: 100px;
        background: #ccc;
        display: inline-block;
        vertical-align: middle;
    }
</style>

<body>

<div class="big">
    <span></span>
    <div class="small">5555555</div>
</div>

</body>
</html>

转载于:https://my.oschina.net/u/3470166/blog/906288