让元素水平垂直居中的四种方法

最新推荐文章于 2022-03-25 16:28:00 发布

isxxya

最新推荐文章于 2022-03-25 16:28:00 发布

阅读量3.3k

点赞数 26

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_49993061/article/details/107997994

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、使用flex弹性布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>flex</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #father{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        height:100vh;
    }
    #son{
        width: 50%;
        height: 50%;
        background-color: white;
    }
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>

二、使用transform变形

将子元素的宽和高设置为百分数，如宽设置为 80%，则需要向 X 轴偏移 10%；那么 translateX 为10/80 = 0.125，即 12.5%；如果高设置为 60%，则需要向 Y 轴偏移 20%，那么 translateY 为20/60 = 33%，即子元素需要设置 transfrom:translate(12.5%,33%)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>transform</title>
</head>
<style>
	 *{
        margin: 0;
        padding: 0;
    }
    #father{      
        background: black;
        height:100vh;
    }
    #son{
        width: 50%;
        height: 50%;
        background: white;
        transform: translate(50%,50%);
    }
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>

三、使用position定位

将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕；
子元素也设置为 positon:fixed，然后上下左右都为 0；margin 设置为 auto，实现水平垂直居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>position</title>
</head>
<style>
	*{
        margin: 0;
        padding: 0;
    }
    #father{      
        background: black;
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
    #son{
        width: 50%;
        height: 50%;
        background: white;
        margin:auto;
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>

四、transform 与 position 结合

将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕
子元素也设置为 positon:fixed，然后上下各设为 50%；即位置到达中心点，但是元素也有高宽度，所以整体就偏移了，应当上下都回退25%的距离，即设置为 transform:translate(-50%,-50%)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>position-transform</title>
</head>
<style>
   *{
        margin: 0;
        padding: 0;
    }
    #father{
        background: black;
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
    }
    #son{
        width: 50%;
        height: 50%;
        background: white;
        position:fixed;
        left:25%;
        top:25%;
        transform: translateY(-50%,-50%);
    }
</style>
<body>
<div id="father"><div id="son"></div></div>
</body>
</html>

isxxya

关注

26
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
让元素水平垂直居中的四种方法

一、使用flex弹性布局<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>flex</title></head><style> *{ margin: 0; padding: 0; } #father{ display: flex; j
复制链接

扫一扫