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

最新推荐文章于 2024-07-25 08:14:42 发布

abcxiaozhang

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量334

点赞数

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

本文链接：https://blog.csdn.net/u011730951/article/details/79289204

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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中的负边距进行居中，注意负边距一定要固定大小的一半，这样才能刚好的垂直左右居中

abcxiaozhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css如何绝对定位水平,垂直居中元素

&lt;title&gt;垂直居中模块示例&lt;/title&gt;&lt;style type="text/css"&gt;#center{ background:#999999; position:absolute; top:50%; left:50%; margin-top:-256px; /*高度的一半需要是负值*/ margin-left:-50%; /*margin-left:-...
复制链接

扫一扫

专栏目录