CSS水平垂直居中

最新推荐文章于 2024-03-12 18:19:00 发布

聪明绝顶的你与即将秃头的我

最新推荐文章于 2024-03-12 18:19:00 发布

阅读量165

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/narzisen/article/details/108930237

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

水平居中

行内元素

看父元素是否是块元素，是的话，直接给父元素加个text-align:center

不是的话，把父元素转换成块元素，添加text-align:center；

块元素

方法一：

是否有宽度？是的话：margin:auto;

没有的话：默认子元素宽度和父元素一样，然后将子元素转成行内或行内块元素display:inline/inline-block;然后父元素设置text-align:center；

方法二：

(子元素有宽度）

让子元素绝对定位，父元素相对定位，然后子元素走父盒子的一半，往回走子元素盒子宽度的一半

left:50%;

margin-left:-子盒子宽度/2 px;

（子元素没有宽度）

left:50%;

transform:translateX(-50%);

方法三：

给父元素添加：

display:flex;

justify-content:center;

垂直居中

单行的行内元素

让单行行内元素的line-height=父元素的height就行

多行的行内元素

给父元素设置display:table-cell; vertical-align:middle;

块级元素

方法一：

（给了高度）

子绝父相，子元素往下走父盒子一半，再往上走自己盒子的一半

top:50%;

margin-top:-子盒子高度/2 px;

（没有给高度）

top:50%;

transform:translateY(-50%);

方法二：

父元素添加属性display:flex; align-items:center;

水平垂直居中

定宽高：(2种)

方法一：子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
        .dad{
            width:400px;
            height:400px;
            background-color: goldenrod;
            position: relative;
        }
        .son{
            width:200px;
            height:200px;
            background-color: green;
            position:absolute;
            left:50%;
            margin-left: -100px;
            top:50%;
            margin-top:-100px;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>
</html>

方法二：子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
        .dad{
            width:400px;
            height:400px;
            background-color: goldenrod;
            position: relative;
        }
        .son{
            width:200px;
            height:200px;
            background-color: green;
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>
</html>

不定宽高（2种）

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
        .dad{
            width:400px;
            height:400px;
            background-color: goldenrod;
            position: relative;
        }
        .son{
            width:200px;
            height:200px;
            background-color: green;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>
</html>

方法二：

设置父元素为flex定位，为父元素设置justify-content: center; align-items: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
        .dad{
            width:400px;
            height:400px;
            background-color: goldenrod;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width:200px;
            height:200px;
            background-color: green;
            
        }
    </style>
</head>
<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>
</html>

聪明绝顶的你与即将秃头的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS水平垂直居中

水平居中行内元素看父元素是否是块元素，是的话，直接给父元素加个text-align:center 不是的话，把父元素转换成块元素，添加text-align:center；块元素方法一：是否有宽度？是的话：margin:auto; 没有的话：默认子元素宽度和父元素一样，然后将子元素转成行内或行内块元素display:inline/inline-block;然后父元素设置text-align:center；方法二：...
复制链接

扫一扫

专栏目录