CSS中如何将一个元素设置为居中效果呢?


摘要:
下文讲述使用css代码将元素设置为居中的方法分享,如下所示:

元素居中是前端开发中,常用的操作,
那么如何将一个元素设置为水平和垂直居中的效果呢?
下文将一一道来,如下所示:

实现思路: 
    只需使用以下属性,即可实现元素水平和垂直居中
	 position:absolute;
      left:50%;
      top:50%;

例:
css实现元素水平和垂直居中的示例分析

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>
<style>
* {
  margin:0px;
  padding:0px;
}
html, body {
  height:100%;
}
#divTest {
  width:300px;
  height:180px;
  background:green;

  color:white;
  line-height:180px;
  text-align:center;
  font-weight:bold;

  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="divTest">我被居中-maomao365.com</div>
</body>
</html>