CSS 水平居中

一、水平居中：行内元素解决方案

居中元素：文字、链接以及其它行内元素（inline或inline-*类型的元素，如inline-block，inline-table，inline-flex）
解决方案：将inline元素包裹在一个display属性为block的父级元素中，如div、nav，设置父级元素属性text-align:center属性即可。 

HTML

< div >文字元素 </ div >

< nav >
   < a  href ="" >链接元素01 </ a >
   < a  href ="" >链接元素02 </ a >
   < a  href ="" >链接元素03 </ a >
</ nav > 

CSS 

nav, div{
  text-align:  center;
}

 

二、水平居中：块状元素解决方案
居中元素：块状元素，如div，p，section等元素，即display属性为block的元素
解决方案：添加margin-left，margin-right属性值为auto即可，如：margin:0 auto;
注意：需要居中的块状元素需有固定的宽度，否则无法实现居中，因为占据100%的宽度。

HTML

< div  class ="center" >水平居中的块状元素 </ div >
< p  class ="center" >水平居中的块状元素 </ p >

CSS 

div, p{
    width:  200px;    /* 需要设置元素的宽度值 */
    height:  150px;
    color: #fff;
    background:  #222;
}
.center {
    margin:  10px auto;
}

 

三、水平居中：多个块状元素的解决方案
居中元素：“多个块状元素”水平横向排列居中
解决方案：设置这几个块状元素的display属性为inline-block，并且设置父元素的text-align属性为center即可。 
注意：如果要实现这几个块状元素的垂直居中，使用上一节中的margin:0 auto属性 即可。 

HTML

< div  class ="center" >水平居中的块状元素 </ div >
< div  class ="center" >水平居中的块状元素 </ div >

CSS

body {
    text-align:  center;
}
/* 页面美化元素 */
div {
    width:  100px;
    padding:  10px;
    height:  50px;
    background-color:  #222;
    color:  #fff;
}
.center {
    display:  inline-block;
}

 

四、水平居中：多个块状元素解决方案（使用flex布局实现）
居中元素：多个块状元素水平横向排列居中（使用flex布局实现）
解决方案：将多个块状元素的父级元素的display属性设置为flex，并设置justify-content:center即可。
HTML

< div  class ="center" >水平居中的块状元素 </ div >
< div  class ="center" >水平居中的块状元素 </ div >

CSS 

body {
    display:  flex;
    justify-content:  center;
}

/* 页面美化元素 */
div{
    width:  100px;
    height:  50px;
    color: #fff;
    background:  #222;
    margin:  10px;
    padding:  10px;
}

 

转载于:https://www.cnblogs.com/sun-mile-rain/p/4020246.html