前端巩固-7、css水平居中和垂直居中显示

cc.ChenLy

已于 2022-04-29 20:38:12 修改

阅读量665

点赞数 2

分类专栏：前端笔记文章标签： css 前端 css3

于 2022-04-29 17:29:07 首次发布

本文链接：https://blog.csdn.net/weixin_46589442/article/details/124500566

版权

前端同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

笔记

14 篇文章 1 订阅

订阅专栏

一，水平居中的方法

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

4、绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
在这里插入图片描述

5、文本垂直居中设置 line-height 为 height 值

在这里插入图片描述

显示

在这里插入图片描述
第五个

cc.ChenLy

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端巩固-7、css水平居中和垂直居中显示

一，水平居中的方法1、元素为行内元素，设置父元素 text-align:center2、如果元素宽度固定，可以设置左右 margin 为 auto ;3、如果元素为绝对定位，设置父元素 position 为 relative ，元素设left:0;right:0;margin:auto;4、使用 flex-box 布局，指定 justify-content 属性为 centerdisplay 设置为 tabel-ceil1、元素为行内元素，设置父元素 text-align:center&lt
复制链接

扫一扫