CSS中的居中

最新推荐文章于 2024-09-02 03:44:41 发布

猎剑

最新推荐文章于 2024-09-02 03:44:41 发布

阅读量425

点赞数 1

文章标签：前端开发

本文链接：https://blog.csdn.net/weixin_42393089/article/details/94991435

版权

一、水平居中

文字水平居中

单行文字水平居中，对于含有inline-*的元素都可以用下面的方法实现水平居中。

语法： text-ailgn：center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧</title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
<div class="box1">
    昨夜星辰昨夜风，画楼西畔桂堂东
</div>
</body>
</html>

在这里插入图片描述

块元素水平居中

语法

margin：0 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧</title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;

        }
        .box2{
            height: 40px;
            width: 40px;
            border: 1px solid red;
            background-color: yellow;
            /*margin: 0 auto;*/
        }
    </style>
</head>
<body>
<div class="box1">
   <div class="box2"></div>
</div>
</body>
</html>

在这里插入图片描述

二、垂直居中

文字的垂直居中

1.单行文字

line-height：“height的值”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧</title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            text-align: center;
            line-height: 400px;
        }
    </style>
</head>
<body>
<div class="box1">
    昨夜星辰昨夜风，画楼西畔桂堂东
</div>
</body>
</html>

在这里插入图片描述

多行文字的水平居中

行内块元素也用这种方法居中

父元素{
display：table-cell
vertical-align：middle
}
子元素{
display：inline-block
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧</title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            text-align: center;
            display: table-cell;
            vertical-align: middle;

        }
        span{
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="box1">
    <span>
    昨夜星辰昨夜风，画楼西畔桂堂东。
    身无彩凤双飞翼，心有灵犀一点通。
    隔座送钩春酒暖，分曹射覆蜡灯红。
    嗟余听鼓应官去，走马兰台类转蓬。
        昨夜星光灿烂，夜半却有习习凉风；我们酒筵设在画楼西畔、桂堂之东。身上无彩凤的双翼，不能比翼齐飞；内心却象灵犀一样，感情息息相通。互相猜钩嬉戏，隔座对饮春酒暖心；分组来行酒令，决一胜负烛光泛红。可叹呵，听到五更鼓应该上朝点卯；策马赶到兰台，像随风飘转的蓬蒿。
</span>
</div>
</body>
</html>

在这里插入图片描述

块元素的垂直居中

position：absolute；
top：50%；
left：50%；
margin-top：“负的height值的一半”；
margin-left：“负的width值的一半”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧</title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;

        }
        .box2{
            height: 40px;
            width: 40px;
            border: 1px solid red;
            background-color: yellow;
            /*margin: 0 auto;*/
        }
    </style>
</head>
<body>
<div class="box1">
   <div class="box2"></div>
</div>
</body>
</html>