让元素水平垂直居中

最新推荐文章于 2024-08-02 10:25:30 发布

米小猿

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量119

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_57661429/article/details/120688847

版权

一、使用position+margin：auto

1、先设置父元素的相对定位

2、设置子元素为绝对定位

3、设置子元素的top right bottom left均为0

4、设置子元素的外边距为auto

二、效果展示

三、代码示例

<body>
<div class="box1">
        <div class="box2"></div>
</div>
</body>

.box1{
            position: relative;
			height: 400px;
			width: 400px;
			margin: 100px auto;
			border:1px solid red;
            background-color: red;
		}
.box2{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin:auto;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

米小猿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让元素水平垂直居中

一、使用position+margin：auto1、先设置父元素的相对定位2、设置子元素为绝对定位3、设置子元素的top right bottom left均为04、设置子元素的外边距为auto二、效果展示三、代码示例<body><div class="box1"> <div class="box2"></div></div></body>...
复制链接

扫一扫