关于css中文本和盒子居中的方法

最新推荐文章于 2024-05-29 14:36:52 发布

chen_晨风

最新推荐文章于 2024-05-29 14:36:52 发布

阅读量1.1w

点赞数 6

分类专栏： css

本文链接：https://blog.csdn.net/qq_37674616/article/details/82724657

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82724657

文本居中

1.使用text-align与line-height

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文字居中</title>
    <link rel="stylesheet" href="">
    <style>
	    div {
	        width: 100px;
	        height: 100px;
	        border: 1px solid red;
	        /*垂直居中*/
	        line-height: 100px;
	        /*水平居中*/
	        text-align: center;
	    }
    </style>
</head>

<body>
    <div>文本居中</div>
</body>
</html>

2.使用padding与text-align

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
        div {
             width: 100px;
            /*此时就不要加height*/
            border: 1px solid red;
            /*垂直居中*/
             line-height:30px;
            padding: 35px 0;
            /*水平居中*/
            text-align: center;
	    }
    </style>
</head>

<body>
    <div>文本居中</div>
</body>
</html>

盒子居中

1.水平居中

设置给子元素自身设置width

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>水平居中</title>
    <link rel="stylesheet" href="">
    <style>
    div {
        border: 1px solid red;
    }
    .parent {
        width: 300px;
        height: 300px;
    }
    .child {
        width: 50px;
        height: 50px;
        /*水平居中*/
        margin: 0 auto;
    }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.垂直居中

1.设置相对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>垂直居中</title>
    <link rel="stylesheet" href="">
    <style>
    div {
        border: 1px solid red;
    }
    .parent {
        width: 300px;
        height: 300px;
    }
    .child {
        width: 50px;
        height: 50px;
        /*水平居中*/
        margin: 0 auto;
        /*实现垂直居中*/
        position: relative;
        top:50%;
        /*值为 height/2*/
        margin-top: -25px;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.设置绝对定位

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>垂直居中</title>
    <link rel="stylesheet" href="">
    <style>
    div {
        border: 1px solid red;
    }
    .parent {
        width: 300px;
        height: 300px;
        /*将父元素设置成相对定位*/
        position: relative;
    }
    .child {
        width: 50px;
        height: 50px;
        position:absolute;
        /*水平居中*/
        left: 50%;
        /*实现垂直居中*/
        top:50%;
        /*值为 height/2*/
        margin-top: -25px;
        /*值为 width/2*/
        margin-left: -25px;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3.给父级设置flex

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>垂直居中</title>
    <link rel="stylesheet" href="">
    <style>
    div {
        border: 1px solid red;
    }
    .parent {
        width: 300px;
        height: 300px;
        display: flex;
        /*主轴的排列方式 默认x轴*/
        justify-content: center;
        /*交叉轴的排列方式*/
        align-items: center;
    }
    .child {
        width: 50px;
        height: 50px;
    }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

chen_晨风

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
关于css中文本和盒子居中的方法

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82724657目录文本居中盒子居中1.水平居中2.垂直居中文本居中1.使用text-align与line-height&lt;!DO...
复制链接

扫一扫

专栏目录