布局：元素水平居中的方法

最新推荐文章于 2022-07-16 02:18:49 发布

Lovely Ruby

最新推荐文章于 2022-07-16 02:18:49 发布

阅读量183

点赞数

分类专栏： # 问题文章标签：居中

本文链接：https://blog.csdn.net/u010263423/article/details/103128968

版权

问题专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

前提
1. 弹性盒子
2. 定位加位移
3. Margin

前提

//body是类似这样的形式
<body>
	<div class="father">
        <div class="son">

        </div>
    </div>
</body>

1. 弹性盒子

第一种

		.father{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: khaki;
            margin: auto auto;
        }

第二种

		.father{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            background-color: salmon;
            width: 200px;
            height: 200px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

第三种

		.father{
            width: 200px;
            height: 200px;
            background-color: yellow;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: black;
        }

2. 定位加位移

		.father{
            width: 200px;
            height: 200px;
            background-color: #7aff9b;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #EEEEEE;

            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

3. Margin

		.father{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: #0086ff;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            
            /*这里的left、right、top、bottom必须写*/
            margin: auto auto;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
        }

Lovely Ruby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局：元素水平居中的方法

文章目录前提1. 弹性盒子第一种第二种第三种2. 定位加位移3. Margin前提//body是类似这样的形式<body> <div class="father"> <div class="son"> </div> </div></body>1. 弹性盒子第一种 ...
复制链接

扫一扫