常用的居中方法

最新推荐文章于 2023-03-01 09:20:36 发布

听风雨呀

最新推荐文章于 2023-03-01 09:20:36 发布

阅读量117

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/m0_51662612/article/details/120565397

版权

盒子水平居中：

margin: 0 auto;

使用条件：设置了指定宽度的块级元素

单行文本水平居中

text-align：center;

文字垂直居中

单行文本用 line-height

多行文本可以用 padding

常用垂直水平居中的方法

<body>
    <div class="fa">
        <div class="son">
        </div>
    </div>
</body>

1. 使用弹性盒子居中，为父元素设置如下代码

      .fa{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
        }

2. 使用绝对定位，父元素设置为相对定位，子元素绝对定位，子元素关键样式代码如下

方法一：

    .son{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

方法二：

    .son{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

听风雨呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的居中方法

盒子水平居中： margin: 0 auto;使用条件：设置了指定宽度的块级元素单行文本水平居中text-align：center;文字垂直居中单行文本用line-height多行文本可以用 padding常用垂直水平居中的方法<body> <div class="fa"> <div class="son"> </div> </div>&l...
复制链接

扫一扫