Rumah > Artikel > hujung hadapan web > css+div水平居中的实例代码

css+div水平居中的实例代码

零下一度asal: 2017-06-24 11:45:281857semak imbas

实现div内容水平居中

实现方案一：margin:0 auto;

div{
     height:100px;
     width:100px;
     background:red;
     margin:0 auto;
  }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div水平居中</title>
	</head>
	<body>
		<div></div>
	</body>
</html>

实现div水平居中方案二：position：absolute;绝对定位

div{height:100px;width:100px;background:red;position:absolute;
   left:50%;
   right:50%;
   margin: auto;
}

实现div水平垂直居中

实现方案一：position:fixed;固定定位

div{height:100px;width:100px;background:red;position:fixed;left:0;top:0;bottom:0;right:0;margin:auto;
            }

实现方案二：position:absolute;绝对定位

div{height:100px;width:100px;background:red;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;
            }

实现方案二：css3+position;

div{height:100px;width:100px;background:red;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
            }

transform为css3的新增属性，因此需要加上前缀，兼容手机和其他的浏览器。如

-ms-transform:translate(-50%,-50%); /* IE 9 */-moz-transform:translate(-50%,-50%); /* Firefox */-webkit-transform:translate(-50%,-50%);/* Safari and Chrome */-o-transform:translate(-50%,-50%); /* Opera */

Atas ialah kandungan terperinci css+div水平居中的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：谈一谈我对css的认识Artikel seterusnya：github上项目发布成静态网页是什么情况？

Artikel berkaitan

Lihat lagi