css块元素居中对齐 问题

关于html中div 块标签居中对齐问题?

1、使用减半的方式移动块标签,在减点块的宽度、高度的一半即可

    {
        width: 800px;
		height: 400px;
        position: absolute;
		top: 50%;
		left: 50%;
        /*减掉div宽度和高度的一半*/
        margin-top: -200px;
		margin-left: -400px;
    }

2、使用转换transform中的translate()方法、

      {
			position: absolute;
			width: 500px;
			height: 350px;
			top:50%;
			left: 50%;
           /*margin-top: 20px;
			margin-left: 150px; */
			background-color: #7FFF00;
			/* 转化 */
			transform: translate(-50%,-50%);
		}

实现的结果:
在这里插入图片描述
关于transform中其他用法参考:https://www.w3school.com.cn/cssref/pr_transform.asp

猜你喜欢

转载自blog.csdn.net/qq_40267002/article/details/120566167
今日推荐