首页 > 其他分享> 文章详细

CSS垂直居中方法

2022-03-01 21:01:32 阅读：193 来源： 互联网

标签：居中 body 100% 元素垂直 margin CSS 200px

CSS垂直居中方法

w3c指定盒子模型（标准模型）

首先，水平居中很简单：margin: 0 auto

垂直居中：

方法一：使用相对定位和 margin-top 属性对元素进行垂直居中

由于div元素的祖先元素html和body的高度默认是为0的，所以需要设置为100%，并且清除默认样式，即把margin和padding设置为0，如果不清除默认样式的话，浏览器就会出现滚动条。

top属性可以使元素向下偏移。但默认情况下，由于position的值为static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。所以，想要移动元素的位置，就要把position设置为不是static的其他值，如relative,absolute,fixed等。（注意，relative是不会使元素脱离文档流的，absolute和fixed则会！也就是说，relative会占据着移动之前的位置，但是absolute和fixed就不会）。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 水平居中 */
            margin: 0 auto;
            position: relative;
            top: 50%;
            margin-top: -100px;
        }
    </style>

注：这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

方法二：使用 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 水平居中 */
            margin: 0 auto;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>

注：这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言，当被居中的元素是被自己内部元素撑开宽或者高的时候可适用此方法。

方法三：绝对定位结合 margin:auto

这种方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top、bottom、left、right设置为0。再将要居中的元素的margin设为auto，这样就可以实现垂直居中了。

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
            
        }
    </style>

方法四：使用 CSS3 的弹性布局（flex）

使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。具体可以看另一条笔记：

标签：居中,body,100%,元素,垂直,margin,CSS,200px
来源： https://www.cnblogs.com/liu-jh/p/15952492.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS垂直居中方法