css如何绝对定位水平,垂直居中元素

abcxiaozhang

于 2018-02-08 14:21:07 发布

阅读量379

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/u011730951/article/details/79289204

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用CSS实现元素垂直居中的方法，通过设置position属性为absolute，并结合top和left百分比定位及负边距，使得指定大小的模块能够精确地在页面中垂直和水平居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<title>垂直居中模块示例</title>

<style type="text/css">
#center{
background:#999999;
position:absolute;
top:50%;
left:50%;
margin-top:-256px; /*高度的一半需要是负值*/
margin-left:-50%; /*margin-left:-100px; 刚好为宽度的一半*/
width:100%; /*width:200px;*/
height:513px;
}
</style>
</head>
<body>
<div id="center">垂直居中模块示例</div>
</body>
</html>

<title>垂直居中模块示例</title>

<style type="text/css">
#center{
background:#999999;
position:absolute;
top:50%;
left:50%;
margin-top:-256px;
margin-left:-50%;
width:100%;
height:513px;
}
</style>
</head>
<body>
<div id="center">垂直居中模块示例</div>
</body>
</html>

基本原理：

1、使用CSS中的position:absolute 进行绝对定位，然后用百分比定位。

2、固定居中模块的大小

3、使用CSS中的负边距进行居中，注意负边距一定要固定大小的一半，这样才能刚好的垂直左右居中