前端巩固-7、css水平居和垂直居中显示-CFANZ编程社区

一，水平居中的方法

1、元素为行内元素，设置父元素 text-align:center
2、如果元素宽度固定，可以设置左右 margin 为 auto ;
3、如果元素为绝对定位，设置父元素 position 为 relative ，元素设
left:0;right:0;margin:auto;
4、使用 flex-box 布局，指定 justify-content 属性为 center
display 设置为 tabel-ceil

1、元素为行内元素，设置父元素 text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一棵小草</p>
    </div>
</body>
</html>

在这里插入图片描述

2、如果元素宽度固定，可以设置左右 margin 为 auto ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        p{
            text-align: center;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一棵小草</p>
    </div>
</body>
</html>

3、如果元素为绝对定位，设置父元素 position 为 relative ，元素设
left:0;right:0;margin:auto;
在这里插入图片描述
4、使用 flex-box 布局，指定 justify-content 属性为 center

显示图

二，垂直居中的方法

1、将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle（少用）
2、使用 flex 布局，设置为 align-item：center
3、绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
4、绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
5、文本垂直居中设置 line-height 为 height 值

1、将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
在这里插入图片描述
2、使用 flex 布局，设置为 align-item：center

3、绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto