垂直居中的十一个方法，demo。

最新推荐文章于 2022-07-20 17:47:45 发布

OBKoro1

最新推荐文章于 2022-07-20 17:47:45 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/OBKoro1/article/details/56049289

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box {
            width: 300px;
            height: 300px;
            background: #ddd;
            position: relative;
        }
        #child {
            width: 150px;
            height: 100px;
            background: orange;
            position: absolute;
            top: 50%;
            margin: -50px 0 0 0;
            line-height: 100px;
        }
        /*#box {//第二种*/
        /*width: 300px;*/
        /*height: 300px;*/
        /*background: #ddd;*/
        /*position: relative;*/
        /*}*/
        /*#child {*/
        /*background: #93BC49;*/
        /*position: absolute;*/
        /*top: 50%;*/
        /*/ translate(0, -50%);*/
        /*}*/
        /*#box {   3333*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*position: relative;*/
        /*}*/
        /*#child {*/
            /*　　width: 50%;*/
            /*height: 30%;*/
            /*background: pink;*/
            /*position: absolute;*/
            /*top: 50%;*/
            /*margin: -15% 0 0 0;*/
        /*}*/
        /*#box { 44４４*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*position: relative;*/
        /*}*/
        /*#child {*/
            /*width: 200px;*/
            /*height: 100px;*/
            /*background: #A1CCFE;*/
            /*position: absolute;*/
            /*top: 0;*/
            /*bottom: 0;*/
            /*margin: auto;*/
            /*line-height: 100px*/
        /*}*/
        /*#box {  55555*/
            /*width: 300px;*/
            /*background: #ddd;*/
            /*padding: 100px 0;*/
        /*}*/
        /*#child {*/
            /*width: 200px;*/
            /*height: 100px;*/
            /*background: #F7A750;*/
            /*line-height: 50px;*/
        /*}*/
        /*#box {   6666666*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
        /*}*/
        /*#base {*/
            /*height: 50%;*/
            /*background: #AF9BD3;*/
        /*}*/
        /*#child {*/
            /*height: 100px;*/
            /*background: rgba(131, 224, 245, 0.6);*/
            /*line-height: 50px;*/
            /*margin-top: -50px;*/
        /*}*/
        /*#box1 { 77777*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*display: flex;*/
            /*align-items: center;*/
        /*}*/
        /*#box {*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*display: flex;*/
            /*align-items: center;*/
        /*}*/
        /*#child {*/
            /*width: 300px;*/
            /*height: 100px;*/
            /*background: #8194AA;*/
            /*line-height: 100px;*/
        /*}*/
        /*#box {  8888888*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*display: flex;*/
            /*flex-direction: column;*/
            /*justify-content: center;*/
        /*}*/
        /*#child {*/
            /*width: 300px;*/
            /*height: 100px;*/
            /*background: #08BC67;*/
            /*line-height: 100px;*/
        /*}*/
        /*#box{  9999*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*line-height: 300px;*/
        /*}*/
        /*#box{ 1000*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*line-height: 300px;*/
        /*}*/
        /*#box img {*/
            /*vertical-align: middle;*/
        /*}*/
        /*#box {  111111*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background: #ddd;*/
            /*display: table;*/
        /*}*/
        /*#child {*/
            /*display: table-cell;*/
            /*vertical-align: middle;*/
        /*}*/
    </style>
<body>
使用绝对定位和负外边距对块级元素进行垂直居中
<div id="test">
    　<div id="box">
    <div id="child">我是测试DIV</div>
</div>
    <!--第二种使用绝对定位和transform-->
    <!--<div id="child">-->
        <!--我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本-->
    <!--</div>-->
    <!--第三种另外一种使用绝对定位和负外边距进行垂直居中的方式-->
    <!--<div id="box">-->
        <!--<div id="child">我也是个测试DIV</div>-->
    <!--</div>-->
    <!--第四种绝对定位结合margin: auto-->
    <!--<div id="box">-->
        <!--<div id="child">呆呆今天退役了(。﹏。)</div>-->
    <!--</div>-->
    <!--第五种使用padding实现子元素的垂直居中-->
    <!--<div id="box">-->
        <!--<div id="child">今天西安的霾严重的吓人，刚看了一眼PM2.5是422</div>-->
    <!--</div>-->
    <!--第六种设置第三方基准-->
    <!--<div id="box">-->
        <!--<div id="base"></div>-->
        <!--<div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>-->
    <!--</div>-->
    <!--第七种使用flex布局-->
    <!--<div id="box1">雾霾天气，太久没有打球了</div>-->
    <!--<div id="box">-->
        <!--<div id="child">-->
            <!--程序员怎么才能保护好眼睛？-->
        <!--</div>-->
    <!--</div>-->
    <!--第八种第二种使用弹性布局的方式-->
    <!--<div id="box">-->
        <!--<div id="child">-->
            <!--答案当然是多用绿色的背景哈哈-->
        <!--</div>-->
    <!--</div>-->
    <!--第九种还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中-->
    <!--<div id="box">-->
        <!--我是一段测试文本-->
    <!--</div>-->
    <!--第十种使用 line-height 和 vertical-align 对图片进行垂直居中-->
    <!--<div id="box">-->
        <!--<img src="duncan.jpeg">-->
    <!--</div>-->
    <!--第十一种使用 display 和 vertical-align 对容器里的文字进行垂直居中-->
    <!--<div id="box">-->
        <!--<div id="child">我也是一段测试文本</div>-->
    <!--</div>-->
</div>
</body>
</html>

OBKoro1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直居中的十一个方法，demo。

html>lang="en"> charset="UTF-8"> #box { width: 300px; height: 300px; background: #ddd; position: relative; } #child {
复制链接

扫一扫