DIV居中

Posted buringke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV居中相关的知识,希望对你有一定的参考价值。

如何居中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居中的主要内容,如果未能解决你的问题,请参考以下文章

div中如何设置文字居中

div水平垂直居中的几种方法

如何让DIV里面的DIV水平垂直居中

如何实现div的上下左右都居中?

怎么把div层设置成固定居中模式

如何让div中的内容垂直居中