水平垂直居中问题

小贝壳.com

已于 2022-11-25 15:09:53 修改

阅读量124

点赞数

文章标签： css css3 html

于 2022-11-09 18:09:01 首次发布

本文链接：https://blog.csdn.net/weixin_43107123/article/details/127774895

版权

1.使用定位未知宽高

.wraper { position: relative; 
	.box { 
	    position: absolute;
	     top: 50%; 
	    left: 50%; 
	    transform: translate(-50%, -50%);
	 } }

2.宽高已知

wraper { position: relative; 
	.box { 
		position: absolute; 
		top: 50%; 
		left: 50%;
		 width: 100px;
		 height: 100px;
		 margin: -50px 0 0 -50px;
 } }

3…弹性盒方式实现

父元素 {
     display:flex;
	 justify-content: center;
     align-items: center;
    }
4.flex 的另一种实现 
父元素 display: flex;2、 margin:auto

5.给自己添加position: relative

box{
    width: 500px;
    height: 500px;
    position: relative;
    background-color: aqua;
}
.content{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
}

7.父元素有line-height: 500px;text-align: center;子元素display: inline-block; vertical-align: middle;

.box{
    width: 500px;
    height: 500px;
    line-height: 500px;
    text-align: center;
    background-color: aqua;

}
.content{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
}