个人常用的水平垂直居中方法

2020年7月9号,更新。

包含块概念没理解透,删掉原来关于百分比值的总结,添加了相关链接。

(转自MDN)CSS基础一定要看的包含块(containing block)


2020年7月8号更新。

在整理CSS面试题的时候,回过头来看这篇觉得之前写的太乱了。做的更改如下:

  1. 去掉了一些平时用不上的方法,如table、grid。暂时觉得文中的方法已够用。

  2. 增加了浮动元素的水平垂直居中

  3. 增加了一些注意点和小结(放于文章开头)

  4. 重新排版,之前写的太乱


▶前言

水平垂直居中无非分成内联元素的居中和块级元素的居中。最简单的方法就是使用flex布局,但要注意浏览器兼容性问题,包括后面提到的transform

内联元素的水平和垂直居中分别可以使用text-align: center;line-height解决

块级元素的水平和垂直居中又需要考虑这个元素的宽高是否固定,如果固定则margin的auto属性就能解决。还有一种方法就是使用定位,拿水平居中举例:

step1:left:50%; 将子元素定位到父元素1/2宽的位置

step2:margin-left:-1/2自身宽 将子元素向左移动自身宽度的一半

当宽高不固定的时候,也可以使用transform:translateX(-50%)来实现step2。

▶涉及到的百分比问题

以下内容全删了,之前写的仅仅是自己的经验,在看到MDN中关于包含块的内容时,发现写的比我总结的好太多了。

请直接移步:(转自MDN)CSS基础一定要看的包含块(containing block)

1. marginpadding:上下左右四个值设置百分比,相对于包含块(父元素,删掉是因为包含块并不能理解为父元素,之前概念不清。和我一样的人戳链接看MDN包含块的概念)的width计算。❗这里注意,就是width

2. transform中的translate:设置百分比,相对于元素自身宽高计算

3. 相对定位的元素,上下左右值以及宽高值使用百分比,根据父元素的宽高计算。❗这里注意,是父元素,没有给父元素限定什么条件。

4. 绝对定位的元素,上下左右以及宽高值适用百分比,根据第一个定位非static的祖先元素的宽高计算。会出现层层往上找找到body的情况,那就是根据窗口视图(viewport)大小来计算了。

5. 固定定位的元素,上下左右以及宽高值适用百分比,根据浏览器窗口视图(viewport)大小来计算。


以下代码都自己跑过没问题。

▶水平居中

内联元素

text-align的用法解释:设置块级元素内文本(准确的说是内联元素)的水平对齐方式。因此要设置在父级元素上

#container{
    text-align: center;
}

块级元素

/* 固定宽度 */
#center{
    width: 100px;
    margin: 0 auto;
}
/* 固定宽度 */
#container{
    width: 1000px;
    height: 1000px;
    position:relative;   /* 父相对定位 */
}
#center{
    width: 500px;
    height: 500px;
    position:absolute;      /* 子绝对定位 */  
    left:50%;               /* 定位到父元素的一半的宽度位置  50%是相对于container的width计算*/
    margin-left: -250px;    /* 向左移动自身宽度的一半 */
}
/*宽度未知*/
#container {
    position:relative;
}
#center{
    position:absolute;
    left:50%;                     /* 定位到父元素的一半的宽度位置  50%是相对于container的width计算*/
    transform:translateX(-50%);   /* 向左移动自身的一半 50%相对于自身宽度计算*/
}

flexbox布局

弹性布局(flex)详解

#container{
    display:flex;
    flex-direction: row;      /* 主轴x */
    justify-content: center;  /* 主轴x居中 */
}
#container{
    display:flex;
    flex-direction: column;   /* 主轴y */
    align-items: center;      /* 副轴x居中 */
}

▶垂直居中

内联元素

css行高line-height的一些深入理解及应用

#center{
    height:12px;
    line-height:12px;
}

块级元素

/* 固定高度,做法效仿水平居中 */
#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}
/* 高度未知,做法效仿水平居中 */
#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flexbox布局

#container {
    display:flex;
    flex-direction: row;    /* 主轴X */
    align-items:center;     /* 辅轴Y居中对齐 */
}
#container {
    display: flex;
    flex-direction: column;    /* 主轴Y */
    justify-content: center;   /* 主轴Y居中对齐 */
}

利用伪元素

利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}

.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

▶水平垂直居中

块级元素

/* 利用定位和margin,这个就不是简简单单设置margin:auto就可以了*/
#container{
    width: 1000px;
    height: 1000px;
    position: relative;
}

#center{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* 固定宽高,结合了水平和垂直的代码 */
#container{
    width: 1000px;
    height: 1000px;
    position: relative;
}
#center{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
/* 宽高未知,结合了水平和垂直的代码 */
#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

display:flex

/* 主轴副轴都居中 */
#container {
    height: 100px; /*必须有高度*/
    display: 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>Document</title>
    <style>
        .outer {
            display: table;
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .middle {
            display: table-cell;
            vertical-align: middle;
        }

        .inner {
            margin:0 auto;
            background: #2b2b2b;
            color: #fff;
            padding: 2rem;
            max-width: 320px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="middle">
            <div class="inner">
                <p>水平垂直居中</p>
            </div>
        </div>
    </div>
</body>

</html>
posted @ 2020-04-16 00:13  浮华而已-  阅读(657)  评论(2编辑  收藏  举报