html中的垂直居中和水平居中

最新推荐文章于 2023-10-02 07:49:57 发布

DCX_abc

最新推荐文章于 2023-10-02 07:49:57 发布

阅读量3.9k

点赞数

分类专栏：前端学习文章标签： html中的垂直居中和水平居中

前端学习专栏收录该内容

32 篇文章 2 订阅

订阅专栏

转自http://blog.csdn.net/github_37037281/article/details/55510401

方法一：运用flex布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .app{width: 500px;height: 500px;background: green;}
            .app{display: flex;align-items: center;justify-content: center}
            /*这样用text-align无用，布局以后，子元素的float、clear和vertical-align属性将失效。*/
            .app img{width: 200px;height: 200px}
        </style>
    </head>
    <body>
        <div class='app'>
            <img src="img/bg.jpg" alt="img" title="img"/>
        </div>
    </body>
</html>

方法二：也是运用flex布局，不过这次是在子元素用align-self：center

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .app{width: 500px;height: 500px;background: green;}
            .app{display: flex;justify-content: center}
            .app img{align-self: center}
            .app img{width: 200px;height: 200px}
        </style>
    </head>
    <body>
        <div class='app'>
            <img src="img/bg.jpg" alt="img" title="img"/>
        </div>
    </body>
</html>

这里写图片描述

方法三：
如果在一段块元素包裹的行内元素中有某个元素比较特殊, 比如: 大写加粗的文字、乱入的图片图标, 垂直居中:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .text{width: 500px;height: 500px;background: red;}
            .text img{ width: 200px;height: 200px;vertical-align: middle;}

        </style>
    </head>
    <body>

        <div class="text">
            <img src="img/bg.jpg" alt="img" title="img"/>可以的
        </div>
    </body>
</html>

效果：

这里写图片描述
方法四：
父元素相对定位(或其他定位){ position: relative; }
子元素绝对定位{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .outer{width: 400px;height: 400px;background: pink;position: relative;}
            .inner{width: 200px;height: 200px;background: black;position: absolute;left: 0;bottom: 0;top: 0;right: 0;margin: auto}
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

效果：
这里写图片描述
方法五：
用padding
方法六：
height/line-height设为相同值
方法七：
父元素设置{ display: table-cell; vertical-align: middle; }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .app{width: 500px;height: 500px;background: green;}
            .app{display: table-cell;vertical-align: middle;text-align: center}
            .app img{width: 200px;height: 200px}
        </style>
    </head>
    <body>
        <div class='app'>
            <img src="img/bg.jpg" alt="img" title="img"/>
        </div>
    </body>
</html>

效果：
这里写图片描述
方法八：
父元素：position：relative
中间元素：position：absolute；left：50%；top：50%
子元素：position：absolute；left：-50%；top：-50%

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .container{width: 400px;height: 400px;position: relative;background: pink}
            .box{position: absolute;left:50%;top:50%;width: 200px;height: 200px}
            .boxinner{width: 200px;height: 200px;position: relative;left: -50%;top:-50%;background: black}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box">
                <div class="boxinner"></div>
            </div>
        </div>
    </body>
</html>

方法九：
父元素：position：relative
子元素：position：absolute；（transform: translate: (-50%, 50%) ）或者（margin-left：-xxpx；margin-top：-xxpx）top：50%；left：50%

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .outer{width: 400px;height: 400px;background: pink;position: relative;}
            .inner{width: 200px;height: 200px;position: absolute;margin-left: -100px;margin-top: -100px;left: 50%;top: 50%;background: black}
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>

    </body>
</html>