css居中方法

方法1
父div

 display: table; 

子p标签

       .a{     
            text-align: center;
            width: 100%;
            height: 100%;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 45px;
            display: table-cell;
            vertical-align: middle;
          }

方法2

   .a{
       position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

方法3

#container{
	height:100px;
	background:#d6d6d6;
}

#center{
	margin:auto;
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
    display:flex;
    align-items: center;
    justify-content: center;
	font-weight:bold;
	font-size:18px;
}

<div id='container'>
		<div id = 'center'>#center</div>
	</div>

多个块状元素的水平居中

#container{
	height:100px;
	background:#d6d6d6;
	text-align:center;
}

#center{
	display:inline-block;
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
}

<div id='container'>
		<div id = 'center'>#center</div>
		<div id = 'center'>#center</div>
		<div id = 'center'>#center</div>
	</div>

使用flexbox实现多个块状元素的水平居中

#container{
	height:100px;
	background:#d6d6d6;
	justify-content:center;
	display:flex;
}

#center{
	margin:auto;
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
   display:flex;
   align-items: center;
   justify-content: center;
	font-weight:bold;
	font-size:18px;
}

<div id='container'>
		<div id = 'center'>#center</div>
		<div id = 'center'>#center</div>
		<div id = 'center'>#center</div>
	</div>

已知高度宽度元素的水平垂直居中 绝对定位与负边距实现

#container{
	background:#d6d6d6;
	height:300px;
	position:relative;
}

#center{
	position:absolute;
	top:50%;
	left:50%;
	margin:-50px 0 0 -50px;
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
}

<div id='container'>
		<div id = 'center'>#center</div>
	</div>

未知高度和宽度元素的水平垂直居中
法一. 当要被居中的元素是inline或者inline-block元素

#container{
	width:600px;
	height:300px;
	background:#d6d6d6;
	display:table-cell;
	text-align:center;
   vertical-align:middle;
}

#center{
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
}

<div id='container'>
		<span id='center'>#center</span>
	</div>

法三. flex布局

#container{
	height:300px;
	background:#d6d6d6;
	display:flex;
	justify-content:center;
  align-items: center;
}

#center{
	width:100px;
	height:100px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	font-size:18px;
	display:flex;		/*这个写在这只是为了#center这几个字的垂直居中*/
	justify-content:center;
  align-items: center;
}

<div id='container'>
		<div id = 'center'>#center</div>
	</div>