css居中

最新推荐文章于 2022-10-24 19:44:41 发布

冥想的声音

最新推荐文章于 2022-10-24 19:44:41 发布

阅读量81

点赞数

分类专栏： css垂直居中文章标签： css css3

本文链接：https://blog.csdn.net/qq_28134589/article/details/117439641

版权

css垂直居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.水平居中

內容居中（包括元素标签注意块元素同行显示需要转换display:inline-block）

<div style='text-align: center;'>居中</div>

（前提容器属性为块标签）容器居中

<div style="margin: 0 auto;width: 100px;">居中</div>

2.垂直居中

<div style="width: 200px; height:200px;">
<a href="#" style="line-height: 200px;">测试链接</a></div>

设置距离父元素50%，再用margin拉回去

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: rgb(30, 186, 250);
        }
        /*设置父块大小及颜色*/

        div a {
            text-decoration: none;
            font-size: 25px;
            color: rgb(254, 7, 183);
            font-weight: 700;
            line-height: 200px;
        }
        /*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/
    </style>
</head>

<body>
    <div><a href="#">测试链接</a></div>
</body>

3 flex

水平垂直居中好用

    display: flex;
    align-items: center;
    height: 100px;
    justify-content: center;

冥想的声音

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css居中

1.水平居中內容居中（包括元素标签注意块元素同行显示需要转换display:inline-block）<div style='text-align: center;'>居中</div>（前提容器属性为块标签）容器居中<div style="margin: 0 auto;width: 100px;">居中</div>2.垂直居中<div style="width: 200px; height:200px;"><a hre
复制链接

扫一扫