CSS子块元素在父块元素水平垂直居中的几种方式

原创已于 2023-05-09 09:15:29 修改 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #前端

于 2022-03-06 10:43:14 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了CSS布局中的绝对定位元素在水平和垂直方向上的约束规则，详细阐述了当存在auto值时如何自动调整元素位置以满足包含块的内容区尺寸。此外，还介绍了利用table元素的垂直居中特性以及使用Flexbox实现元素的灵活居中布局，包括justify-content和align-items属性的用法。最后提到了一种利用Flexbox的margin auto实现居中的简化方法。

一、开启绝对定位的元素的盒子模型在水平上满足下面的等式

水平上：margin-left + left + border-left + padding-left + width + padding-right + border-right + right + margin-right=包含块内容区的宽度

以上等式必须满足，否则称之为过度约束，则等式会自动调整：

如果上五个属性中出现了auto(不指定具体的像素值即为auto)，优先调整的顺序为right>left>width>margin-right>margin-left
如果width margin-left marign-right left right 均没有设置auto值，则浏览器会自动调整right的值满足等式
如果指定了right的值没有指定left的值则自动调整left的值满足等式
如果指定了right和left的值 width的值没有指定，其他四个属性也有设置为auto的，但是因为优先级比较低，此时浏览器将其他设置auto的属性值设置为0，width的值自动填充以满足等式
如果right left width 均制定值，margin为auto，则自动调整margin-right的值，margin-left设置为0以满足等式
如果magin-left的值为auto，比他优先级高的均制定了值(right left width margin-right)，则自动调整margin-left的值以满足等式
如果margin-right的值为auto，而marign-left的值也为auto，则此时浏览器将同时调整margin-left和margin-right的值，并且margin-left===marign-right

同样的垂直方向上满足以下等式

margin-top + top + border-top + padding-top + height +  padding-bottom + border-bottom + bottom + margin-bottom =包含块内容区的高度

不满足时调整的规则类比水平方向
利用第6条规则

<!DOCTYPE html>
<html lang="zh">
<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>
    <link rel="stylesheet" href="../icon/css/all.css">
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: aqua;
            position: relative;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto auto;
        }
     </style>
</head>  
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

二、利用table元素的一些特点

水平居中的原理参考这篇文章设置子元素在包含块中水平居中
垂直居中主要是是利用了vertical-align这个属性

<!DOCTYPE html>
<html lang="zh">
<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>
    <link rel="stylesheet" href="../icon/css/all.css">
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: aqua;
            display:table-cell;
            vertical-align:middle;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin:0px auto;
        }
     </style>
</head>  
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

三、利用弹性盒子

justify-content:如何分配主轴上的空白空间，主轴元素符合排列
可选值：

flex-start:元素沿着主轴起边排列
flex-end:元素沿着主轴终边排列
center:元素居中排列
space-around:空白分布在元素的两侧
space-between:空白均匀分布到元素间
space-evenly:空白分布到元素的单侧

align-items:元素在辅轴上如何对齐
可选值：

stretch:默认值 将元素的长度设置为相同的值，同一行元素的高度相同
flex-start:元素不会拉伸，沿着辅轴起边对齐
flex-end:沿着辅轴的终边对齐
center:居中对齐
baseline:基线对齐

align-content：如何分配辅轴上的空白空间
可选值：

flex-start:元素沿着辅轴起边排列
flex-end:元素沿着辅轴终边排列
center:元素居中排列
space-around:空白分布在元素的两侧
space-between:空白均匀分布到元素间
space-evenly:空白分布到元素的单侧

<!DOCTYPE html>
<html lang="zh">
<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>
    <link rel="stylesheet" href="../icon/css/all.css">
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: aqua;
            display:flex;
            justify-content:center;
            align-items:center;
           /* 或者利用align-content属性*/
           /*	align-content:center;*/
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
     </style>
</head>  
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

今天还看到了利用flex布局的另一种设置方式

<!DOCTYPE html>
<html lang="zh">
<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>
    <link rel="stylesheet" href="../icon/css/all.css">
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: aqua;
            display:flex;
        }
        .inner{
            width: 100px;
            height: 100px;
            margin:auto;
            background-color: blue;
        }
     </style>
</head>  
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>