CSS文本【水平垂直居中】不限文本实际宽高【弹性盒模型】

#define bug

已于 2022-08-13 23:35:20 修改

阅读量147

点赞数

文章标签： html 前端 css

于 2022-08-11 21:31:06 首次发布

本文链接：https://blog.csdn.net/includebug/article/details/126293639

版权

利用弹性盒模型将标签元素在块状父标签内水平垂直居中。

在文本的父标签设置这三个CSS属性即可:

设置弹性盒

display: flex;

设置水平居中，即flex-direction的方向的居中；弹性盒默认水平排列

justify-content:center;

设置垂直居中；即flex-direction的方向的另一个方向的居中

align-items: center;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 0 auto;
            margin-top: 100px;
            border: 4px solid cyan;
            width: 500px;
            height: 500px;
            
            display: flex;/*设置弹性盒*/
            justify-content:center;/*设置水平居中，即flex-direction的方向的居中；弹性盒默认水平排列*/
            align-items: center;/*设置垂直居中；即flex-direction的方向的另一个方向的居中*/
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 理论上文本内容要用块状如div标签包裹，但我发现不用也可以 -->
        水平垂直居中文本，不限文本宽高，
        <!-- 水平垂直居中文本，不限文本宽高，
        水平垂直居中文本，不限文本宽高，
        水平垂直居中文本，不限文本宽高，
        水平垂直居中文本，不限文本宽高， -->
    </div>
</body>
</html>

效果图：

#define bug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS文本【水平垂直居中】不限文本实际宽高【弹性盒模型】

利用弹性盒模型将标签元素在块状父标签内水平垂直居中。
复制链接

扫一扫

CSS文本【水平垂直居中】不限文本实际宽高【弹性盒模型】

利用弹性盒模型将标签元素在块状父标签内水平垂直居中。

在文本的父标签设置这三个CSS属性即可:

设置弹性盒

display: flex;

设置水平居中，即flex-direction的方向的居中；弹性盒默认水平排列

justify-content:center;

​​​​​​​设置垂直居中；即flex-direction的方向的另一个方向的居中

align-items: center;

代码：

效果图：

设置垂直居中；即flex-direction的方向的另一个方向的居中