css实现水平垂直居中的6中方法

最新推荐文章于 2024-07-25 16:45:46 发布

lydia_liuY

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量234

点赞数

分类专栏： css 文章标签： css css3 flex css水平垂直居中

本文链接：https://blog.csdn.net/lydia_liuY/article/details/81138899

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种：使用position的相对定位（position:relative和position:absolute;margin:auto;配合）。

这种方法我面试的时候跟别人说，他们都蜜汁自信的说”这个不可能“，你回去试试，当时真的觉得他们也太自信了吧，很是无语。这次把我知道的方法总结出来。

兼容：ie8以上。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用position的相对定位（position:relative和position:absolute;margin:auto;配合）</title>
    <style>
        .out{
            width:100%;
            height:500px;
            background:blue;
            position:relative;
        }
        .in{
            width:20%;
            height:20%;
            background:yellow;
            position:absolute;
            left:0px;
            right:0px;
            top:0px;
            bottom:0px;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">兼容ie8及以上</div>
    </div>
</body>
</html>

第二种：使用position和css3中的transform配合。未知宽度。

兼容：ie9以上

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>position transform 元素未知宽度   兼容ie9及以上</title>
    <style>
        .out{
            width:100%;
            height:500px;
            background:blue;
            position:relative;
        }
        .in{
            width:20%;
            height:20%;
            background:yellow;
            position:absolute;
            left:50%;top:50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">兼容：ie9以上</div>
    </div>
</body>
</html>

第三种：固定宽度使用position相对定位和margin配合。

这里与第一种方法不一样，这里居中的div的宽度是固定的。

兼容：ie7以上

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定宽度 position的相对定位</title>
    <style>
        .out{
            width:100%;
            height:500px;
            background:blue;
            position:relative;
        }
        .in{
            width:300px;
            height:100px;
            background:yellow;
            position:absolute;
            left:50%;
            top:50%;
            margin:-50px 0 0 -150px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">兼容ie7及以上</div>
    </div>
</body>
</html>

第四种： table-cell布局

兼容：ie8及以上

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>table-cell布局 兼容ie7以上</title>
    <style>
        .box{
            width: 100%;  
            height: 200px; 
            background-color: #FFCCFF;  
		    display: table; 
	    }
        .out{
            width:100%;
            height:500px;
            background:blue;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
        .in{
            width:20%;
            height:20%;
            background:yellow;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="out">
            <div class="in">兼容ie8及以上</div>
        </div>
    </div>
</body>
</html>

第五种：table-cell布局

兼容：ie7以上。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>table-cell布局 兼容ie7以上</title>
    <style>
        .box{
            width: 100%;  
            height: 200px; 
            background-color: #FFCCFF;  
            display: table;
            position:relative;
            overflow:hidden;
             
        }
        .out{
            width:100%;
            height:500px;
            background:blue;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
            position:absolute;
            top:50%;
        }
        .in{
            width:20%;
            height:20%;
            background:yellow;
            display:inline-block;
            position:relative;
            top:-10%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="out">
            <div class="in">兼容ie8及以上</div>
        </div>
    </div>
</body>
</html>

第六种：flex布局

兼容：ie10以上

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex布局</title>
    <style>
        .out{
            width:100%;
            height:500px;
            background:blue;
            display:-webkit-flex;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .in{
            width:20%;
            height:20%;
            background:yellow;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">兼容ie10及以上</div>
    </div>
</body>
</html>

lydia_liuY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现水平垂直居中的6中方法

第一种：使用position的相对定位（position:relative和position:absolute;margin:auto;配合）。这种方法我面试的时候跟别人说，他们都蜜汁自信的说”这个不可能“，你回去试试，当时真的觉得他们也太自信了吧，很是无语。这次把我知道的方法总结出来。兼容：ie8以上。&lt;!doctype html&gt;&lt;html&gt;&lt;h...
复制链接

扫一扫

专栏目录