垂直居中的方法和技巧

最新推荐文章于 2024-08-28 22:07:19 发布

侠客岛的含笑

最新推荐文章于 2024-08-28 22:07:19 发布

阅读量475

点赞数

分类专栏： web前端文章标签： css html 垂直居中

本文链接：https://blog.csdn.net/qq_33936481/article/details/53712649

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

简单的情况text-align:center; vertical-align: middle等，下面是复杂一点的：
// 方法一：已知元素的高宽

CSS：
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute;
top: 50%;
left: 50%;
/* 二分之一的负height，width */
margin-top:-100px ;
margin-left: -100px;
}
//方法二:未知元素的高宽

CSS：
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute;
/* transform: translate(-50%,-50%) 或 margin:auto与四边距相等 */
margin:auto; / 无这个就只有top、left起作用/
top: 0;
left: 0;
bottom:0;
right: 0;
}
//3，两个按钮在div中居中，并相距一定距离

div{width: 600px;height: 500px;background-color: rgba(240,240,240,0.9);text-align:
center;}
.button{ width:100px;height: 90px;background-color: #f00;position: relative;top: 50%;
transform: translate(0,-50%) }
.button1{margin-left: 0;margin-right: 100px;}
.button2{margin-right: 0;}