【CSS3】-13 一些居中技巧

最新推荐文章于 2021-05-13 12:45:36 发布

Nameless-Y

最新推荐文章于 2021-05-13 12:45:36 发布

阅读量103

点赞数

分类专栏： html5+css3 文章标签： css3 居中

本文链接：https://blog.csdn.net/yang1111111112/article/details/113779163

版权

html5+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

行内元素水平居中：text-align：center。如果行内有文本、图片等元素。可以为父容器设置 text-align：center

块元素：

定宽块元素居中：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中。
1. 定宽要有【 width 】元素、居中要有【margin：上下随便左右auto】元素，缺一不可
实现一直宽度盒子水平居中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>已知宽高实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;

position:relative;
    }

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        
        position:absolute;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
           
   
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

效果：

解析：

3. 宽高不定盒子水平居中

通常使用【定位】以及【 translate 】完成

父类盒子position：relative

子类盒子：position：absolute； transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>宽高不定实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
        </div>
    </div>
</body>

</html>

效果：

来自：html5+css3：https://www.imooc.com/learn/9

Nameless-Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS3】-13 一些居中技巧

行内元素水平居中：text-align：center。如果行内有文本、图片等元素。可以为父容器设置 text-align：center块元素：定宽块元素居中：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中。定宽要有【 width 】元素、居中要有【margin：上下随便左右auto】元素，缺一不可实现一直宽度盒子水平居中：<!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫