数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何让“position:absolute”元素居中？
我们可以在 Python 中轻而易举地以水平垂直方向对绝对位置元素进行居中。为此，请使用以下 CSS 属性。
对于水平居中，使用以下属性 -
- 左
- 边距左
对于垂直居中，使用以下属性：-
- 顶部
- 边距顶部
绝对位置元素的水平居中
示例
要水平居中绝对位置元素，请使用以下代码 -
<!DOCTYPE html>
<html>
<head>
<style>
div.center{
width:200px;
height: 50px;
left:50%;
margin-left:-100px;
position:absolute;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>Positioning an Element</h1>
<div class='center'>
This is centered horizontaly
</div>
</body>
</html>
输出
绝对位置元素的垂直居中
示例
要垂直居中绝对位置元素，请使用以下代码 -
<!DOCTYPE html>
<html>
<head>
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height: 50px;
top:80%;
margin-top:-100px;
position:absolute;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>Positioning an Element</h1>
<div class='center'>
This is centered vertically
</div>
</body>
</html>
输出
绝对位置元素的水平和垂直居中
示例
要水平和垂直居中绝对位置元素，请使用以下代码 -
<!DOCTYPE html>
<html>
<head>
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height: 50px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>Positioning an Element</h1>
<div class='center'>
This is centered vertically and horizontally
</div>
</body>
</html>
输出
更新于： 06-12-2022
1K+ 浏览量
广告