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

css 专栏收录该内容
7 篇文章 0 订阅

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

目录

文本居中

盒子居中

1.水平居中

2.垂直居中


文本居中

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>

 

  • 6
    点赞
  • 0
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值