美文网首页CSS
css实现水平垂直居中的几种方法

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

作者: 前端葱叶 | 来源:发表于2018-10-19 15:54 被阅读0次

笔记学习整理

css垂直水平居中分为：

  • 定宽居中
    方法①absolute+负margin
    ②absolute+margin:auto
    ③absolute+calc
    ④ min-height: 100vh+flex+margin:auto
  • 不定宽居中
    ①absolute + transform
    ②lineheight
    ③writing-mode
    ④css-table
    ⑤flex
    ⑥grid

一、定宽居中

1、定宽居中(absolute+负maigin)

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定宽居中</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            position: relative;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 1、定宽高定位：absolute + 负边距margin */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>

</html>

2、定宽居中(absolute+maigin:auto)

position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box.size {
            width: 100px;
            height: 100px;
        }
        
        .box {
            background: green;
            /*2、定宽高定位：absolute + margin:auto */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box size">
            子元素定宽高
        </div>
    </div>
</body>

</html>

3、定宽居中(absolute+calc)

position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box.size {
            width: 100px;
            height: 100px;
        }
        
        .box {
            background: green;
            /* 3、定宽高定位：（兼容性依赖css3的calc）absolute + 计算属性calc  */
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box size">
            子元素定宽高
        </div>
    </div>
</body>

</html>

4、定宽居中（min-height: 100vh+flex+margin:auto）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定宽居中</title>
    <style>
        main{
            min-height: 100vh;
            /* vh相对于视窗的高度，视窗高度是100vh */
            /* “视区”所指为浏览器内部的可视区域大小，
            即window.innerWidth/window.innerHeight大小，
            不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */
            display: flex;
        }
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            margin: auto;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
    </main>
</body>
</html>

二、不定宽居中

1、不定宽高居中：absolute+transform（依赖translate 2d的兼容性）

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            position: relative;
        }
        
        .box {
            background: green;
            /* 1、不定宽高居中：（依赖translate 2d的兼容性）absolute+transform */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

2、不定宽高居中：lineheight

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 2、不定宽高居中  */
            text-align: center;
            line-height: 300px;
            font-size: 0px;
        }
        
        .box {
            /* 2、不定宽高居中lineheight */
            display: inline-block;
            vertical-align: middle;
            line-height: inherit;
            text-align: left;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

3、不定宽高居中

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 3、不定宽高居中css-table */
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        .box {
            /* 3、 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

4、不定宽高居中flex

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 4、不定宽高居中flex */
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

5、不定宽高居中grid (css3网格系统grid兼容性不如flex 不推荐使用)

display: grid;
justify-self: center;
align-self: center;

<!DOCTYPE HTML>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>不定宽高定位</title>
    <meta content="" name="Description" />
    <meta content="" name="Keywords" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript"></script>
    <style>
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            /* 5、grid */
            display: grid;
        }
        
        .box {
            /* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */
            justify-self: center;
            align-self: center;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div class="box">
            子元素不定宽高
        </div>
    </div>
</body>

</html>

这边通过网上学习，总结了以上几种方法，便于日后遗忘。

相关文章

网友评论

    本文标题：css实现水平垂直居中的几种方法

    本文链接：https://www.haomeiwen.com/subject/zukfzftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    CSS

    关于我们|服务条款|联系我们|css实现水平垂直居中的几种方法|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！