css的居中方式

1.css的居中方式

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中

一、水平居中
1.行内元素(文本txt，图片img)

text-align:center;

2.块级元素居中
01.确定宽度的块级元素(已知块状元素的width且width为固定值)
方法一:margin和width实现水平居中

.content{
	width:200px;
	height:200px;
	margin:0 auto;
}

方法二:绝对定位和margin-left: -(宽度值/2)实现水平居中

.content{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;/*width的一半*/
}

02未知宽度的块级元素(块状元素的宽度width不固定)
方法一:利用table标签的长度自适应性

将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中
table{
  	 	margin:0 auto;
}
<div>
	<table>
    	<tr><td>
    		<ul>
        		<li>Hello world</li>
        		<li>Hello world</li>
   		 	</ul>
    	</td></tr>
	</table>
</div>

或使用 display : table；然后设该元素“左右margin”值为“auto”来实现居中
.wrap{
    background:#ccc;
    display:table;
    margin:0 auto;
}
<div class="wrap">
	 Hello world  
</div>

方式二:改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
存在问题：需额外处理inline-block的浏览器兼容性（解决inline-block元素的空白间距

.container{
    text-align:center;
 }
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline; 
 }
<div class="container">
    <ul>
        <li>Hello world</li>
        <li>Hello world</li>
    </ul>
</div>

方法三:绝对定位实现水平居中

.content{
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%); /* 移动元素本身50% */
	  background: aqua;
}

方法四:相对定位实现水平居中
先设置父元素wrap清除浮动，然后左浮动。定位让wrap向右偏移50%。然后定义子元素相对于父元素向左偏移50%。脱离父元素。

/*目标元素的父元素*/
.contentParent{
  float: left;
  position: relative;
  left: 50%;
  clear:both;
}
/*目标元素*/
.content{
  	position: relative;
  	left:-50%;/*right:50%*/
  	background-color:aqua;
}

二、垂直居中
垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。
01.父元素高度确定的单行文本

/*设置父元素的 height 和 line-height 高度一致来实现的*/
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
<div class="wrap">
    <h2>Hello world</h2>
</div>

02.父元素高度确定的多行文本
方法1：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

.wrap{
    height:300px;
    background:#ccc;
    /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
    vertical-align:middle;  
}
<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    background:#ccc;
    display:table;
    vertical-align:middle;
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>