DIV居中

标签：如何   绝对定位   ott   lex   flex   一半   bottom   transform   效果   

如何居中div？

• 水平居中：给div设置一个宽度，然后添加margin:0 auto属性

   div{
   	width:200px;
   	margin:0 auto;
    }
  

• 让绝对定位的div居中

   div {
   	position: absolute;
   	width: 300px;
   	height: 300px;
   	margin: auto;
   	top: 0;
   	left: 0;
   	bottom: 0;
   	right: 0;
   	background-color: pink;	/* 方便看效果 */
   }
  

• 水平垂直居中一

   确定容器的宽高 宽500 高 300 的层
   设置层的外边距
  
   div {
   	position: relative;		/* 相对定位或绝对定位均可 */
   	width:500px;
   	height:300px;
   	top: 50%;
   	left: 50%;
   	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
   	background-color: pink;	 	/* 方便看效果 */
  
    }
  

• 水平垂直居中二

   未知容器的宽高，利用 `transform` 属性
  
   div {
   	position: absolute;		/* 相对定位或绝对定位均可 */
   	width:500px;
   	height:300px;
   	top: 50%;
   	left: 50%;
   	transform: translate(-50%, -50%);
   	background-color: pink;	 	/* 方便看效果 */
  
   }
  

• 水平垂直居中三

   利用 flex 布局
   实际使用时应考虑兼容性
  
   .container {
   	display: flex;
   	align-items: center; 		/* 垂直居中 */
   	justify-content: center;	/* 水平居中 */
  
   }
   .container div {
   	width: 100px;
   	height: 100px;
   	background-color: pink;		/* 方便看效果 */
   }  

DIV居中

标签：如何   绝对定位   ott   lex   flex   一半   bottom   transform   效果   

原文地址：https://www.cnblogs.com/Buringke/p/11097594.html