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

最新推荐文章于 2022-05-25 10:16:38 发布

UNDERCOVERj

最新推荐文章于 2022-05-25 10:16:38 发布

阅读量1k

点赞数 1

分类专栏： html-css 文章标签： html 布局

本文链接：https://blog.csdn.net/github_37037281/article/details/55510401

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

方法一：运用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>

效果：
这里写图片描述
方法十
利用伪元素

.main{width: 400px;height: 400px;background: green;text-align: center}
.main:after{content: '';display: inline-block;width: 0;height: 100%;vertical-align: middle;overflow: hidden;}
.inner{width: 100px;height: 100px;background: pink;vertical-align: middle;display: inline-block;}
<div class="main">
        <div class="inner"></div>
</div>

方案十一：

多行文本居中
<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;">
    <span style="display:inline-block;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
            This is a test.
    </span>
</div>

UNDERCOVERj

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中的垂直居中和水平居中

方法一：运用flex布局<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .app{width: 500px;height: 500px;background: green;} .app{display: flex;ali
复制链接

扫一扫

专栏目录