内部DIV设定position: absolute该如何居中

最新推荐文章于 2023-02-24 11:07:20 发布

ljlttkx

最新推荐文章于 2023-02-24 11:07:20 发布

阅读量373

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/qq_23260455/article/details/118731090

版权

css基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.className1{
width: 300px;
height: 300px;
margin:0 auto;
background-color: red;
position: relative;
}
 
.className2{
position: absolute;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
 
页面效果见图1

图1 在这里插入图片描述

试过在className2里加

margin:0 auto

在有position: absolute;出现时margin:0 auto;是不起作用的

解决无法居中的办法：

在className2里加入以下代码：

left:50%;
margin-left: -100px;

在这里插入图片描述
如果只是单纯的设置为

left:50%

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ljlttkx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内部DIV设定position: absolute该如何居中

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><style>.className1{width: 300px;height: 300px;margin:0 auto;background-color: red;position: relative;} .className2{position: absolute
复制链接

扫一扫