css元素常用居中方式3种

最新推荐文章于 2021-08-12 17:28:32 发布

浅端

最新推荐文章于 2021-08-12 17:28:32 发布

阅读量241

点赞数

分类专栏： CSS学习 CSS3练习题文章标签： css css3

本文链接：https://blog.csdn.net/qq_40686529/article/details/104673341

版权

CSS3练习题同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

CSS学习

4 篇文章 0 订阅

订阅专栏

友情提示：看完本文章需要3分钟。

三种方式都可以在未知元素宽高的情况下使用。

一、DOM结构，很简单。
外层父元素father,内层子元素son。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

所有结果图都是这样

二、上代码，一目了然。
1.首推 flex布局(一种布局方式，超级好用。不清楚这种布局的请看这里)
CSS代码：

	   .father{
            display: flex;
            align-items: center;  /* 关键就是这两行 */
            background: yellow;
            width: 300px;
            height: 300px;
        }
        .son{
            background: green;
            width: 100px;
            height: 100px;
        }

绝对定位+transform
css代码：

.father{
            background: yellow;
            position: relative;
            width: 300px;
            height: 300px;
        }
        .son{
            position: absolute;
            /* 关键是这2行 */
            top: 50%; /* 自己头部在父元素的50%处 */
            transform: translateY(-50%); /* 使自身上移50% */
            background: green;
            width: 100px;
            height: 100px;
        }

绝对定位+magin:auto
css代码：
.father{
background: yellow;
position: relative;
width: 300px;
height: 300px;
}
.son{
position: absolute;
/* 关键是这3行 /
top: 0;
bottom: 0;
margin: auto; / 在top0,bottom0的情况下，让自身的上下边距自适应，只能居中*/
background: green;
width: 100px;
height: 100px;
}

浅端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css元素常用居中方式3种

三种方式都可以在未知元素宽高的情况下。一、DOM结构，很简单。外层父元素father,内层子元素son。<body> <div class="father"> <div class="son"></div> </div></body>所有结果图都是这样二、上代码，一目了然。1....
复制链接

扫一扫

专栏目录