css水平居中方案垂直居中方案块级/内联元素居中方案

最新推荐文章于 2021-11-06 14:49:57 发布

一起来看烟花吧

最新推荐文章于 2021-11-06 14:49:57 发布

阅读量213

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/chenjie9230/article/details/109688400

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

目录标题

水平居中
垂直居中
总结

水平居中

对于块级元素⭐可以设置左右margin为auto

给块级元素设置一个宽度，然后添加 margin:0 auto 属性

<style>
.outer {
    height: 100px;
    background-color: yellowgreen;
}
.inner {
    width: 100px; /*必要的*/
    height: 50px;
    margin-left: auto;/**/
    margin-right: auto;/**/
    background-color: red;
}
</style>
<body>
    <div class="outer">
        <!-- 块级元素div.inner在div.outer中水平居中 -->
        <div class="inner">dd</div>
    </div>
</body>

针对inline、inline-block元素

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

<style>
.outer {
    height: 100px;
    background-color: yellowgreen;
    text-align: center;
}
.inner {
    width: 100px;
    height: 50px;
    background-color: red;
}
</style>
<body>
    <div class="outer">
        <!-- 行内元素span在div.outer中水平居中 -->
        <span class="inner">I am span inner</span>
    </div>
</body>

<style>
.outer {
    height: 100px;
    background-color: yellowgreen;
    text-align: center;
}
.inner {
    display: inline-block;
    background-color: red;
    width: 200px;
    height: 50px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">hhhh 大家好</br>大家</div>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MzISo3v-1627115882396)(./assets/CSS%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD+%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E6%96%B9%E6%A1%88%E5%B0%8F%E7%BB%93/text-align%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD.png)]

通过绝对定位 + margin-left位移

<style>
.outer {
    position: relative; /*父元素必须开启定位 也可以是绝对定位 这样子元素就会参照父元素计算百分比单位*/
    width: 50%;
    margin-left: 100px;
    height: 100px;
    background-color: yellowgreen;
    text-align: center;
}
.inner {
    /* 绝对定位参照开启的定位的祖先元素来定位：也就是相对于outer定位 */
    position: absolute; /*设置了绝对定位后，内联元素会变成块元素，所以这类定位方式对块元素和内联元素来说效果一致*/
    left: 50%; /*代表元素包含块的宽度的百分比*/
    margin-left: -100px; /*自身元素的一半*/
    background-color: red;
    width: 200px; /*设置宽度是必须的 不然margin-left就没法设置*/
    height: 50px;
}
</style>
<body>
    <div class="outer">
        <!-- 通过 绝对定位 + 减去自身宽度的二分之一 来做水平居中 -->
        <div class="inner">I like</div>
    </div>
</body>

⭐通过绝对定位+left+right+margin:auto

<style>
.outer {
    position: relative; /**/
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    position: absolute; /*设置了绝对定位后，内联元素会变成块元素，所以这类定位方式对块元素和内联元素来说效果一致*/
    left: 0; /**/
    right: 0; /**/
    margin-left: auto; /**/
    margin-right: auto; /**/
    background-color: red;
    width: 200px; /*必须设置宽度 否则子元素会和父元素一样宽*/
    height: 100px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">I like</div>
    </div>
</body>

格式化宽高仅出现在"绝对定位模型"中，也就是出现在position属性值为absolute和fixed的元素中，在默认情况下绝对定位元素的宽度表现是"包裹性"，“宽度由内部尺寸决定”，但是有一中情况下我由外部尺寸决定，就是对于非替换元素，当left/right；top/bottom对立方位的属性值同时存在的时候，元素的宽度和高度表现为"格式化宽度和高度"，其宽度大小相对具有定位特性的祖先（就是相对那个元素绝对定位的那个父元素）元素计算。

《格式化宽高的理解》

通过绝对定位 + transform

<style>
.outer {
    position: relative; /**/
    width: 50%;
    margin-left: 100px;
    height: 100px;
    background-color: yellowgreen;
    text-align: center;
}
.inner {
    /* 绝对定位参照开启的定位的祖先元素来定位：也就是相对于outer定位 */
    position: absolute; /**/
    left: 50%; /*代表元素包含块的宽度的百分比*/
    transform: translate(-50%, 0); /*自身元素的一半*/
    background-color: red;
    width: 200px; /* 这个宽度也不可以不设置 那么inner会被内容撑宽 仍会居中显示 */
    height: 50px;
}
</style>

<body>
    <div class="outer">
        <!-- 通过 绝对定位 + 减去自身宽度的二分之一 来做水平居中 -->
        <div class="inner"></div>
    </div>
</body>

flex

<style>
.outer {
    /* 给父元素设置flex布局：outer容器设置flex布局 */
    display: flex; 
    /* 水平居中： justify-content属性定义了项目(也就是outer容器中的元素)在主轴上(这里是水平方向)的对齐方式为居中对齐*/
    justify-content: center; 
    height: 100px;
    background-color: yellowgreen;
    text-align: center;
}
.inner {
    background-color: red;
    width: 200px;
    height: 50px;
}
</style>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

使用css函数calc()

<style>
.outer {
    height: 100px;
    background-color: yellowgreen;
}
.inner {
    position: absolute;
    left: 80px;
    /* 
        使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距 
        calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。
    */
    width: calc(100% - 160px);
    height: 50px;
    background-color: red;
}
</style>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

垂直居中

通过line-height

单行文本在父元素中垂直居中，设置line-height和父元素高度一样。因为文本默认在line-height中居中。

（只针对行内元素，使用 display: inline-block; 的块级元素无效）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .outer {
        height: 100px;
        background-color: yellowgreen;
    }
    .inner {
        line-height: 100px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="outer">
        <!-- 
            为inner设置line-height为100px
            那么inner中的单行文本会在100px中居中
            从效果图中可以看到单行文本在100px的垂直中央
        -->
        <span class="inner">I am a span</span>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNbhR6I6-1627115882401)(.\assets\CSS水平居中+垂直居中方案小结\line-height垂直居中.png)]

<style>
.outer {
    height: 100px;
    background-color: yellowgreen;
}
.inner {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 100px;
    background-color: red;
}
</style>
<body>
    <div class="outer">
        <!-- 给块级元素设置line-height属性，失效 -->
        <div class="inner">I am a span</div>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7k1JADgL-1627115882416)(.\assets\CSS水平居中+垂直居中方案小结\line-height垂直居中2.png)]

通过绝对定位 + margin-top

<style>
.outer {
    position: relative; /**/
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    position: absolute; /**/
    top: 50%; /**/
    margin-top: -50px; /**/
    background-color: red;
    width: 200px;
    height: 100px; /*必须设置*/
}
</style>
<body>
    <div class="outer">
        <!-- 通过 绝对定位 + 减去自身高度的二分之一 来做垂直居中 -->
        <div class="inner">I like</div>
    </div>
</body>

通过绝对定位 +transform

<style>
.outer {
    position: relative; /**/
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    position: absolute; /**/
    top: 50%; /**/
    transform: translate(0, -50%); /**/
    background-color: red;
    width: 200px;
    height: 100px;  /*可以不设置*/
}
</style>
<body>
    <div class="outer">
        <!-- 通过 绝对定位 + transform 来做垂直居中 -->
        <div class="inner">I like</div>
    </div>
</body>

⭐通过绝对定位+top+bottom+margin:auto

<style>
.outer {
    position: relative; /**/
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    position: absolute; /**/
    top: 0; /**/
    bottom: 0; /**/
    margin-top: auto; /**/
    margin-bottom: auto; /**/
    background-color: red;
    width: 200px;
    height: 100px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">I like</div>
    </div>
</body>

flex

<style>
.outer {
    display: flex; /**/
    align-items: center; /**/
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    background-color: red;
    width: 200px;
    height: 100px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">I like</div>
    </div>
</body>

vertical-align

这里想详细总结下vertical-align。

官方对vertical-align属性的描述：

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align属性可被用于两种环境：

垂直对齐表格单元内容:
使行内元素盒模型与其行内元素容器垂直对齐。

垂直对齐表格单元内容的实践

先介绍vertical-align属性的第一种应用环境：垂直对齐表格单元内容

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。通过下面这个例子很容易理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        td {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <table>
        <tbody><tr>
          <td style="vertical-align: baseline">baseline</td>
          <td style="vertical-align: top">top</td>
          <td style="vertical-align: middle">middle</td>
          <td style="vertical-align: bottom">bottom</td>
        </tr>
      </tbody></table>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-taI6QQ3S-1627115882419)(.\assets\CSS水平居中+垂直居中方案小结\垂直对齐表格单元格内容.png)]

利用表格单元格来设置垂直居中

<style>
.outer {
    display: table-cell; /* 设置display为表格单元格 */
    vertical-align: middle; /* 垂直对齐表格单元格中的内容 */
    height: 200px;
    background-color: yellowgreen;
}
.inner {
    background-color: red;
    width: 200px;
    height: 100px;
}
</style>
<body>
    <div class="outer">
        <div class="inner">I like</div>
    </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMleGjLZ-1627115882422)(.\assets\CSS水平居中+垂直居中方案小结\vertical-align垂直居中.png)]

总结

水平居中

对于块级元素：子元素宽度已设置(不为auto)+子元素左右margin为auto
text-align属性定义行内元素如何相对它的父元素对齐
父元素开启定位+子元素绝对定位+子元素宽度已设置(不为auto)+left:50%+margin-left:-自身元素宽度的一半
父元素开启定位+子元素绝对定位+子元素宽度已设置(不为auto)+left:0+right:0+margin-left:auto+margin-right:auto：由于宽固定，因为水平方向实现平分
父元素开启定位+子元素绝对定位+left:50%+transform:translate(-50%,0) （可以不设置子元素的宽度）
父元素display:flex justify-content:center
父元素display: grid justify-items: center
垂直居中

单行文本在父元素居中，可以设置line-height和父元素高度一样
父元素开启定位+子元素绝对定位+top:50%+margin-top:-自身元素高度的一半
父元素开启定位+子元素绝对定位+top:0+bottom:0+margin-top:auto+margin-bottom:auto
父元素开启定位+子元素绝对定位+top:50%+transform:translate(0,-50%)
父元素display:flex align-items:center
父元素display: grid align-items: center
如果父元素的高宽是被设置的固定值，那么不对高宽进行计算上面还有哪些居中方案可用呢？

父元素开启定位+子元素绝对定位+left:50%; top:50%+transform:translate(-50%,-50%)
父元素display:flex; justify-content:center ； align-items:center
父元素display: grid； justify-items: center； align-items: center
父元素开启定位+子元素绝对定位+top:0; bottom:0; left:0; right:0; +margin:auto;
如果不知道元素的高宽是由内容撑开的那么上面还有那些居中方案可用呢？

父元素开启定位+子元素绝对定位+left:50%; top:50%+transform:translate(-50%,-50%)
父元素display:flex; justify-content:center ； align-items:center
父元素display: grid； justify-items: center； align-items: center

一起来看烟花吧

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css水平居中方案垂直居中方案块级/内联元素居中方案

水平居中对于块级元素⭐可以设置左右margin为auto<style>.outer { height: 100px; background-color: yellowgreen;}.inner { width: 100px; height: 50px; margin-left: auto;/**/ margin-right: auto;/**/ background-color: red;}</style>&lt
复制链接

扫一扫